效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小例子</title>
<style type="text/css">
.profile-card-wrap .content:before,
.profile-card-wrap .link-info .photo:after{
content:;
position:absolute;
}
.profile-card-wrap{
top:50%;
left:50%;
width:300px;
height:125px;
-webkit-perspective:800px;
perspective:800px;
position:absolute;
margin-left:-250px;
margin-top:-137.5px;
}
.profile-card-wrap .content{
width:205px;
padding:20px;
height:inherit;
position:relative;
font-family: "Microsoft YaHei";
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
background:rgba(255,255,255,.8);
border:1px solid rgba(0,0,0,.35);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
-webkit-transition:-webkit-transform .4s ease-in-out 0s;
transition:transform .4s ease-in-out 0s;
}
.profile-card-wrap .content:before{
top:50%;
right:40px;
height:30px;
font-size:18px;
border:inherit;
padding:2px 8px;
margin-top:-10px;
line-height:24px;
background:inherit;
content:attr(data-text);
-webkit-backface-visibility:visible;
backface-visibility:visible;
-webkit-transform:rotateY(-180deg) scale(1);
transform:rotateY(-180deg) scale(1);
-webkit-transition:-webkit-transform .4s ease-in-out 0s;
transition:transform .4s ease-in-out 0s;
text-shadow:1px 1px 0 rgba(255,255,255,.45);
}
.profile-card-wrap .content .title{
font-size:24px;
font-weight:500;
margin-bottom:25px;
}
.profile-card-wrap .content p{
margin:0;
max-width:190px;
line-height:24px;
text-align:center;
}
.profile-card-wrap .link-info{
top:50%;
right:35px;
width:180px;
height:180px;
margin-top:-90px;
position:absolute;
}
.profile-card-wrap .link-info .social{
top:50%;
right:50%;
z-index:1;
width:35px;
height:35px;
position:absolute;
margin-top:-17.5px;
margin-right:-17.5px;
}
.profile-card-wrap .link-info .social .link{
color:#fff;
width:35px;
height:35px;
-webkit-transform:none;
-ms-transform:none;
transform:none;
line-height:33px;
text-align:center;
position:absolute;
border-radius:50%;
border:1px solid #444;
box-shadow:0 3px 4px rgba(47,66,81,.75);
-webkit-transition:all .3s cubic-bezier(0.680, 1.550, 0.265, 1);
transition:all .3s cubic-bezier(0.680, 1.550, 0.265, 1);
}
.profile-card-wrap .link-info .social .de1{
background:#3b5a9a;
border-color:#384f76;
}
.profile-card-wrap .link-info .social .de2{
background:#29a9e1;
border-color:#2a7a9b;
}
.profile-card-wrap .link-info .social .de3{
background:#df4b38;
border-color:#474848;
}
.profile-card-wrap .link-info .social .de4{
background:#cd2129;
border-color:#942825;
}
.profile-card-wrap .link-info .social .de5{
background:#117bb8;
border-color:#1c5d7d;
}
.profile-card-wrap .link-info .social .de6{
background:#cb312e;
border-color:#933532;
}
.profile-card-wrap .link-info .social .de7{
background:#df4b38;
border-color:#974336;
}
.profile-card-wrap .link-info .social .de8{
background:#29a9e1;
border-color:#974336;
}
.profile-card-wrap .link-info .social .de9{
background:#3b5a9a;
border-color:#974336;
}
.profile-card-wrap .link-info .photo{
z-index:2;
width:inherit;
height:inherit;
overflow:hidden;
position:relative;
border-radius:50%;
border:5px solid #fff;
-webkit-transform:scale(.6);
-ms-transform:scale(.6);
transform:scale(.6);
background:url(/static/index/im/mm.jpg) #fff no-repeat center / cover;
box-shadow:0 0 2px, 0 5px 5px rgba(47,66,81,.75);
-webkit-transition:-webkit-transform .5s ease-in-out 0s;
transition:transform .5s ease-in-out 0s;
}
.profile-card-wrap .link-info .photo:after{
width:170px;
height:170px;
border-radius:inherit;
background:rgba(54,106,157,.2);
}
.profile-card-wrap .toggle{
top:50%;
z-index:5;
left:-20px;
width:40px;
height:40px;
color:#f2f2f2;
cursor:pointer;
font-size:28px;
line-height:40px;
text-align:center;
margin-top:-15px;
border-radius:50%;
position:absolute;
background:#fff;
-webkit-user-select:none;
box-shadow:0 4px 4px #333;
-webkit-transition:color, background, -webkit-transform .1s ease-in-out 0s;
transition:color, background, transform .1s ease-in-out 0s;
}
.profile-card-wrap .toggle{
color:#fff;
background:#117BB8;
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
transform:rotate(135deg);
box-shadow:2px -2px 4px #333;
}
.profile-card-wrap .content{
-webkit-transform:rotateX(0);
transform:rotateX(0);
}
.profile-card-wrap .content:before{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform:rotateX(-180deg) scale(0);
transform:rotateX(-180deg) scale(0);
}
.profile-card-wrap .content + .link-info .link{
-webkit-transform:none;
-ms-transform:none;
transform:none;
}
.profile-card-wrap .content + .link-info .link:nth-child(1){
-webkit-transform:translate(80px,-80px);
-ms-transform:translate(80px,-80px);
transform:translate(80px,-80px)
}
.profile-card-wrap .content + .link-info .link:nth-child(2){
-webkit-transform:translate(120px,-70px);
-ms-transform:translate(120px,-70px);
transform:translate(120px,-70px)
}
.profile-card-wrap .content + .link-info .link:nth-child(3){
-webkit-transform:translate(155px,-50px);
-ms-transform:translate(155px,-50px);
transform:translate(155px,-50px)
}
.profile-card-wrap .content + .link-info .link:nth-child(4){
-webkit-transform:translate(180px,-15px);
-ms-transform:translate(180px,-15px);
transform:translate(180px,-15px)
}
.profile-card-wrap .content + .link-info .link:nth-child(5){
-webkit-transform:translate(200px,20px);
-ms-transform:translate(200px,20px);
transform:translate(200px,20px)
}
.profile-card-wrap .content + .link-info .link:nth-child(6){
-webkit-transform:translate(180px,55px);
-ms-transform:translate(180px,55px);
transform:translate(180px,55px)
}
.profile-card-wrap .content + .link-info .link:nth-child(7){
-webkit-transform:translate(155px,90px);
-ms-transform:translate(155px,90px);
transform:translate(155px,90px)
}
.profile-card-wrap .content + .link-info .link:nth-child(8){
-webkit-transform:translate(120px,110px);
-ms-transform:translate(120px,110px);
transform:translate(120px,110px)
}
.profile-card-wrap .content + .link-info .link:nth-child(9){
-webkit-transform:translate(80px,120px);
-ms-transform:translate(80px,120px);
transform:translate(80px,120px)
}
.profile-card-wrap .content + .link-info .photo{
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
-webkit-animation:bounceIn .4s;
animation:bounceIn .4s;
}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
</style>
</head>
<body>
<div class="profile-card-wrap" id="markername+DIV">
<label for="check" class="toggle" οnclick="$(\#markername+DIV\).hide()"> + </label>
<div class="content" id="markername+Content">
</div>
<div class="link-info" id="idmarkername+">
<div class="social">
<a class="link de1" href="#" οnclick="return detail(1)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="1">1</i>
</a>
<a class="link de2" href="#" οnclick="return detail(2)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="2">2</i>
</a>
<a class="link de3" href="#" οnclick="return detail(3)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="3">3</i>
</a>
<a class="link de4" href="#" οnclick="return detail(4)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="4">4</i>
</a>
<a class="link de5" href="#" οnclick="return detail(5)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="5">5</i>
</a>
<a class="link de6" href="#" οnclick="return detail(6)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="6">6</i>
</a>
<a class="link de7" href="#" οnclick="return detail(7)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="7">7</i>
</a>
<a class="link de8" href="#" οnclick="return detail(8)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="8">8</i>
</a>
<a class="link de9" href="#" οnclick="return detail(9)">
<i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="9测试">9</i>
</a>
</div>
</div>
</div>
</body>
</html>