按钮效果图
具体css实现代码
.bs-fdicon{ position:absolute; left: 50%; bottom: -43px; width: 85px; height: 85px; margin-left: -43px; z-index: 10; }
.bs-fdicon a{ position: relative; display: inline-block; width: 85px; height: 85px; z-index: 11; cursor: pointer;}
.bs-fdicon img{ position: relative; display: block; width: 85px; height: 85px; border-radius: 50%;}
.bs-fdicon a:after{ content:''; position: absolute; left: 0; top: 0; z-index: 1; width: 85px; height: 85px; border-radius: 50%; background: rgba(176,186,254,0.3); animation: sploosh 2s linear infinite;}
.bs-fdicon a:before{ content:''; position: absolute; left: 0; top: 0; z-index: 2; width: 85px; height: 85px; border-radius: 50%; background: rgba(176,186,254,0.3); animation: sploosh2 2s linear infinite;}
@keyframes sploosh {
0% {
box-shadow: 0 0 0 0px rgba(176,186,254, 0.5);
background: rgba(176,186,254, 0.3);
}
100% {
box-shadow: 0 0 0 30px rgba(176,186,254, 0);
background: rgba(176,186,254, 0.1);
}
}
@keyframes sploosh2 {
0% {
box-shadow: 0 0 0 0px rgba(176,186,254, 0.5);
background: rgba(176,186,254, 0.3);
}
100% {
box-shadow: 0 0 0 60px rgba(176,186,254, 0);
background: rgba(176,186,254, 0);
}
}