无卡顿的··· 纯css··· 的··· 动态··· 图标····
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享</title>
<style type="text/css">
*,*:before,*:after{box-sizing:border-box;}
*:before,*:after{
content:"";position:absolute;
}
.share-area{
list-style:none;font-size:100px;
width:110px;height:110px;position:relative;
}
.share-item{
width:100px;height:100px;position:absolute; border-radius:50%; top:5px;left:5px;
}
.share-item i,.share-item em{
position:absolute;
}
.share-wx{
background:#3A3A3A;
}
.share-wx i:nth-child(1){
width:.58em;height:.492em;background:#99d226;border-radius:50%;top:.192em;left:.096em;
}
.share-wx i:nth-child(1):before,.share-wx i:nth-child(1):after{
width:.088em;height:.088em;border-radius:50%;background:#3A3A3A;top:.118em;left:.15em;
}
.share-wx i:nth-child(1):after{
left:.348em;
}
.share-wx i:nth-child(1) em{
border:.04em solid transparent;
border-right:.12em solid #99d226;
top:.44em;left:0;
transform:rotate(-36deg);
}
.share-wx i:nth-child(2){
width:.474em;height:.41em;border-radius:50%;top:.39em;left:.422em;background:#ececec;
}
.share-wx i:nth-child(2):before,.share-wx i:nth-child(2):after{
width:.07em;height:.07em;border-radius:50%;background:#3A3A3A;top:.106em;left:.13em;
}
.share-wx i:nth-child(2):after{
left:.29em;
}
.share-wx i:nth-child(2) em{
border:.04em solid transparent;
border-right:.12em solid #ececec;
top:.34em;left:.336em;;
transform:rotate(206deg);
}
.share-wb i:nth-child(1){
width:.638em;height;
}
.share-qq{
background:#1379db;
}
.share-qq i:nth-child(1){
width:.436em; border-width:0 .08em .265em;border-color:transparent transparent #fddd2e;border-style:solid;
top:.3em;left:.288em;
}
.share-qq i:nth-child(1):before{
width:100%; border-width:.156em .218em; border-color: #fddd2e transparent transparent; border-style:solid;top:.264em;left:-.08em;
}
.share-qq i:nth-child(1) em{
transform:translate(0,-.134em);
}
.share-qq i:nth-child(1) em:nth-child(2){
transform: rotate(72deg) translate(.082em,-.4em);
}
.share-qq i:nth-child(1) em:nth-child(3){
transform: rotate(144deg) translate(-.14em, -.556em);
}
.share-qq i:nth-child(1) em:nth-child(4){
transform: rotate(-72deg) translate(-.276em, -.136em);
}
.share-qq i:nth-child(1) em:nth-child(5){
transform: rotate(-144deg) translate(-.364em, -.394em);
}
.share-qq i:nth-child(1) em:before{
width:.28em;height:.28em;background:#fddd2e;
transform: rotate(45deg) skew(16deg,16deg);
border-radius:5px;
}
.share-qq i:nth-child(2) {
height:.26em;width:.08em;background:#f45300;
top:.36em;left:.472em;
transform:skew(-45deg);
}
.share-qq i:nth-child(2):before, .share-qq i:nth-child(2):after{
border-width:.024em .18em;
border-color:transparent #f45300 #f45300 transparent;
border-style:solid;
left:-.28em;
top:-.016em;
}
.share-qq i:nth-child(2):after{
border-color: #f45300 transparent transparent #f45300;
top:.236em;left:0;
}
.share-qwb{
background:#4ab3ea;
}
.share-qwb i{
width:.48em;height:.48em;border-radius:50%;
background:#fff;
box-shadow:inset 0 0 0 .05em #fff, inset 0 0 0 .15em #4ab3ea;
top:.106em;
left:.092em;
}
.share-qwb i em:nth-child(1){
width:.16em;height:.1em;transform:rotate(41deg); top:.36em; left:.03em; background:#4ab3ea;
}
.share-qwb i em:nth-child(1):before,.share-qwb i em:nth-child(1):after{
width:.05em;
height:.05em;
top:.016em;left:-.022em;
border-radius:50%;
background:#fff;
}
.share-qwb i em:nth-child(1):after{
top:.002em;left:.132em;width:.054em;height:.054em;
}
.share-qwb i em:nth-child(2){
width: .4em;
height: .688em;
border-style: solid;
border-width: .04em;
border-color: transparent transparent transparent #fff;
border-radius: 50%;
top: .228em;
left: .032em;
transform: rotate(19deg);
}
.share-qwb i em:nth-child(2):before{
width:.04em;
height:.04em;
top:.542em;right:.248em;
border-radius:50%;
background:#fff;
}
.share-qwb i:nth-child(2){
transform:scale(.575) rotateY(180deg);
top:.192em;left:.496em;
}
.share-rr{
background:#004DA4;
}
.share-rr i{width:.5em;height:.6em;overflow:hidden;bottom:.1em;transform-origin:100% 0;}
.share-rr i:before{
width:1.2em;height:1.2em;
border-style: solid;
border-width: .08em;
border-color: transparent #fff transparent transparent ;
border-radius:50%;
transform: rotate(30deg);
bottom:0;right:-.032em;
}
.share-rr em{
width:.096em;height:.16em;background:#fff;
top:.144em;left:50%;margin-left:-.048em;
}
.share-rr i:nth-child(2){
transform:rotateY(180deg);
}
.share-tb{
background:#3795F5;color:#3795F5;
}
.share-tb i{
width:.86em;height:.86em;margin:.07em;background:#fff;
border-radius:50%;
}
.share-tb i:before{
width:100%;height:100%;
background-color: #fff;
background-image: linear-gradient(#eee 1px, transparent 1px);
background-size: 100% .08em;
border-radius:50%;
}
.share-tb i:after{
width:.144em;height:.144em;border-radius:50%;
background:#e8494a;
top:-.034em;left:50%;
margin-left:-.072em;
}
.share-tb i em{
font-size:.5em;font-family:"黑体";font-style:normal;text-align:center;width:100%;height:100%;line-height:1.7em;
font-weight:700;
}
.share-dd{
background:#e2e2e2;
}
.share-dd i:nth-child(1){
width:.552em;height:.304em;
border:.1em solid #3285ad;
left:50%;margin-left:-.276em;
top:.352em;
}
.share-dd i:nth-child(1):before{
border-width:.09em .074em;
border-style:solid;
border-color:#3285ad transparent transparent #3285ad;
top:.204em;left:.032em;
}
.share-dd i:nth-child(1) em{
width:.106em;height:.192em;background:#3285ad;top:-.292em;left:.084em;
}
.share-dd i:nth-child(1) em:before{
width:.16em;height:.1em;background:inherit;
left:100%;top:.046em;
}
.share-dd i:nth-child(2){
width:.15em;height:.15em;border-radius:50%; background:#3285ad;
left:.182em;bottom:.156em;
}
.share-dd i:nth-child(2):before, .share-dd i:nth-child(2):after{
width:inherit;height:inherit;border-radius:inherit;background:inherit;
left:.3em;
}
.share-dd i:nth-child(2):after{
left:.488em;
}
.share-btn{
width:110px;height:110px;background:#ececec;border-radius:50%;position:absolute;top:0;left:0;
font-size:30px;font-family:arial;color:#3285ad;font-weight:700;
text-align:center;line-height:110px;
}
.share-btn p{margin:0;position:absolute;top:0;left:0;width:100%;height:100%;
transition:.5s;
}
.share-btn .btn1{
opacity:1;transform:rotate(0);
}
.share-btn .btn2{
opacity:0;transform:rotate(180deg);
font-size:44px;
}
.share-area:hover .share-btn .btn1{
opacity:0;transform:rotate(180deg);
}
.share-area:hover .share-btn .btn2{
opacity:1;transform:rotate(0);
}
.share-area li{cursor:pointer}
.share-area .share-item{
transform:rotate(360deg);
transition:.4s;
}
.share-area:hover .share-item{
transform:rotate(0);
}
.share-area:hover .share-item:nth-child(1){
transition-delay:.6s;
}
.share-area:hover .share-item:nth-child(2){
transition-delay:.5s;
}
.share-area:hover .share-item:nth-child(3){
transition-delay:.4s;
}
.share-area:hover .share-item:nth-child(4){
transition-delay:.3s;
}
.share-area:hover .share-item:nth-child(5){
transition-delay:.2s;
}
.share-area:hover .share-item:nth-child(6){
transition-delay:.1s;
}
.share-area:hover .share-item:nth-child(1){
left:120px;
}
.share-area:hover .share-item:nth-child(2){
left:222px;
}
.share-area:hover .share-item:nth-child(3){
left:324px;
}
.share-area:hover .share-item:nth-child(4){
left:426px;
}
.share-area:hover .share-item:nth-child(5){
left:528px;
}
.share-area:hover .share-item:nth-child(6){
left:630px;
}
.share-area:hover{
width:730px;
}
</style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
<ul class="share-area">
<li class="share-item share-wx"><i><em></em></i><i><em></em></i></li>
<li class="share-item share-qq"><i><em></em><em></em><em></em><em></em><em></em></i><i></i></li>
<li class="share-item share-qwb"><i><em></em><em></em></i><i><em></em><em></em></i></li>
<li class="share-item share-rr"><i></i><i></i><em></em></li>
<li class="share-item share-tb"><i><em>贴</em></i></li>
<li class="share-item share-dd"><i><em></em></i><i></i></li>
<li class="share-btn"><p class="btn1">share</p><p class="btn2">×</p></li>
</ul>
</div>
</body>
</html>
.