/* 图标配色 */ .qq { color: #1DA1F2; } .wc { color: #07CE67; } .em { color: #E1306C; } /* 基本单元格样式 */ .cell { width: 46rem; display: grid; grid-template-rows: 2rem 1rem auto 1rem; grid-template-columns: 11rem 35rem; } /* 分割线样式 */ .line { grid-area: l; background-color: var(--theme-color); margin: .5rem .6rem .3rem; } /* 细分单元格样式：联络方式 */ .contact{ height: 11.5rem; grid-template-areas: "h .""h i""h i""l l"; text-indent: 0; } /* 细分单元格样式：普通 */ .normal { height: auto; grid-template-areas: "t t""t t""c c""l l"; line-height: 2rem; } /* 设定头像样式 */ .head { width: 9rem; height: 9rem; margin: .5rem auto 0; border-radius: 50%; overflow: hidden; border: .5rem solid #fafafa; background-color: #fafafa; box-shadow: 0 0 0.5rem #babbbc; display: flex; grid-area: h; } .head img { width: 100%; } /* 图标容器 */ .icon_box { display: inline-flex; justify-content: center; grid-area: i; } .icon_box a { margin: 2rem; text-decoration: none; display: flex; position: relative; text-decoration: none; } /* 图标项 */ .icon_box a .item { width: 4.5rem; height: 4.5rem; position: relative; transition: transform 0.3s; } /* 鼠标效果 */ .icon_box a:hover .item { transform: rotate(-35deg) skew(20deg); } .icon_box a:hover .item span:nth-child(1) { opacity: 0.2; } .icon_box a:hover .item span:nth-child(2) { opacity: 0.4; transform: translate(.5rem, -.5rem); } .icon_box a:hover .item span:nth-child(3) { opacity: 0.6; transform: translate(1rem, -1rem); } .icon_box a:hover .item span:nth-child(4) { opacity: 0.8; transform: translate(1.5rem, -1.5rem); } .icon_box a:hover .item span:nth-child(5) { opacity: 1; transform: translate(2rem, -2rem); background-color: currentColor; } .icon_box a .item span { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: .1rem solid currentColor; border-radius: .8rem; display: flex; justify-content: center; align-items: center; transition: all 0.5s; } .icon_box a:hover .item span { box-shadow: -.1rem .1rem .3rem; } .icon_box a:hover .icon{ transition: all 0.5s; color: #fff; } .icon_box a .icon_name { position: absolute; left: 50%; bottom: 1rem; font-size: 0; transition: all .3s ease; transform: translateX(-50%); pointer-events: none; white-space: 0; } .icon_box a:hover .icon_name { bottom: -2.5rem; font-size: 1.6rem; } /* 图标属性 */ .icon{ width: 3rem; height: 3rem; margin: 5px; vertical-align: middle; fill: currentColor; overflow: hidden; } .title{ grid-area: t; font-size: 1.8rem; text-indent: .2em; align-items: center; display: flex; padding: 0 .5em; } .title .item { display: flex; align-items: center; border-bottom: 2px solid #808080; line-height: 2.2rem; font-weight: 900; } .title .item::before { content: ''; width: .5em; } .title .item::after { content: ''; width: .5em; } .title svg { width: 1em; height: 1em; fill: currentColor; } .content { grid-area: c; /* background-color: tomato; */ text-indent: 1.5em; line-height: 2.3rem; } .list { margin: 0; padding: 0; /* background-color: cyan; */ width: calc(100% - 1.5em); left: 1.5em; text-indent: 0; position: relative; overflow: hidden; list-style-type: none; } ul li::before { content: ''; width: .7rem; height: .7rem; display: inline-block; background-color: currentColor; border-radius: 50%; margin: .7rem .4rem .2rem .5rem; } .x { font-size: 1.8rem; font-weight: 500; margin: .5rem 0; } .x::after { content: attr(d); /* background-color: mediumpurple; */ position: absolute; right: 1em; text-indent: 0; color: #808080; } .content hr { margin: .5rem 1em; border: 0; height: 1px; background-image: linear-gradient(to right, #80808020, #80808040, #80808020); } .wechat { width: 270px; height: 0px; display: flex; overflow: hidden; background-color: #fff; border-radius: 5%; justify-content: center; align-items: center; position: absolute; left: -110px; top: 70px; z-index: 10; box-shadow: #00000070 5px 5px 5px; opacity: 0; transition: all .5s; } .wechat img { width: 100%; } .wechat span { position: absolute; bottom: 20px; } .wc:hover .wechat{ height: 360px; opacity: 1; }