android 辐射动画_CSS3 的box-shadow进阶之 - 动画篇 - 制作辐射动画

本篇文章是上一篇讲box-shadow基础知识的延伸，建议先花几分钟阅读那篇文章，

除了box-shadow属性知识外，制作动画，还需要对CSS3的animation, @keyframes制作动画有所了解。

接下来，还是那张图。。

基本思路如下：

1.写好一个div，

2.利用border-radius，把它变成一个圆

3.给它添加after伪类，伪类也是一个一样大小的圆(不设置背景色)，跟当前的圆重叠在一起

4.鼠标移入的时候，给伪类添加animation动画

5.动画包括，opacity的变化，添加层叠阴影(关键)，伪类放大2倍，就做好了我们要的效果了。

感叹一下，CSS的伪类真是厉害~~好多情况下可以使用

代码如下

body{margin:0;padding:0;background:black;

}.circle{width:50px;height:50px;border-radius:50%;background-color:#f50ad5;margin:80px;

}.circle:after{content:'';display:block;left:0;top:0;width:50px;height:50px;border-radius:50%;

}.circle:hover:after{ /*鼠标入的时候，伪类元素的动画开始，动画名称就是下面@keyframes定义的circle*/animation:circle 1.3s ease-out 75ms;