我们在绿叶学习网首页可以看到一个非常酷炫的脉冲动画(如下图所示),当鼠标移到元素上时,脉冲动画会循环播放,当鼠标移出元素时,动画就会停止,

实现代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> @keyframes circle { 0% { transform: scale(1); opacity: 0.8; } 20% { transform: scale(1); opacity: 0.6; } 40% { transform: scale(1.2); opacity: 0.4; } 60% { transform: scale(1.4); opacity: 0.2; } 80% { transform: scale(1.6); opacity: 0.1; } 100% { transform: scale(1.8); opacity: 0.0; } } #wrapper { position:relative; display: inline-block; margin:100px; } #circle { position:absolute; top:-12px; left:-12px; width:50px; height:50px; border:12px solid #A8E957; border-radius:62px; opacity: 0; } #wrapper:hover div { animation: circle 1s ease-out; animation-iteration-count: infinite; } </style> </head> <body> <div id="wrapper"> <div id="circle"></div> <img src="img/icon.png" alt=""> </div> </body> </html>

浏览器预览效果如下图所示。

分析:

脉冲动画的关键是使用transform:skew()来实现圆圈的放大,并且在放大的过程中改变元素的透明度。

当鼠标移到元素上面时,会循环播放脉冲动画。这个效果非常棒,很可能在你的开发中就会用到。