css hover效果

特效1：

<div class="pulseicon"><span class="facts-ico establish-ico"></span></div>

<style type="text/css">
     ::placeholder{ opacity: 0.5 }
     .facts-ico{ display: inline-block; vertical-align: middle; width: 70px; height: 70px; border: 1px solid #ededed; background: #f8f8f8; border-radius: 50%; position: relative; }
    .pulseicon:hover .facts-ico{ animation: pulseicon 1.8s infinite }
    .facts-ico::before{ position: absolute; left: 0; bottom: 0; right: 0; margin: 0 auto; top: 0; width: 40px; height: 38px; content: ''; margin-right: 10px; vertical-align: middle; display: inline-block; margin: auto; }
    
    @-webkit-keyframes pulseicon {
       0% {
         box-shadow: 0 0 0 0 rgba(0,0,0, 0.15);
       }
       70% {
           box-shadow: 0 0 0 14px rgba(0,0,0, 0);
       }
       100% {
           box-shadow: 0 0 0 0 rgba(0,0,0, 0);
       }
     }
    @keyframes pulseicon {
       0% {
         box-shadow: 0 0 0 0 rgba(0,0,0, 0.15);
       }
       70% {
           box-shadow: 0 0 0 14px rgba(0,0,0, 0);
       }
       100% {
           box-shadow: 0 0 0 0 rgba(0,0,0, 0);
       }
     }
</style>

效果：

 

来源：CSDN

作者：Bonjours

链接：https://blog.csdn.net/Bonjours/article/details/103663491