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

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

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

接下来，还是那张图。。

 

基本思路如下：

1.写好一个div，<div class="circle"></div>

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

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

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

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

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

代码如下

<div class="circle"></div>　

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;
  }

  @keyframes circle{
    0% {
        opacity: 0.4;
    }
    40% {
        opacity: 0.7;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 10px 10px black, 0 0 0 10px rgba(255,255,255,0.8); /*三层阴影*/
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 10px 10px black, 0 0 0 10px rgba(255,255,255,0.8);
        transform: scale(2); /*放大两倍*/
        opacity: 0;
    }
  }

 

 

第二张图实现起来就更简单了

直接添加添加动画，放大阴影尺寸即可，代码如下

<button class="button">点击</button>　

  body {
    margin:0;
    padding:0;
    background:black;
  }
  .button{
    width:50px;
    height:35px;
    color:#f50ad5;
    border:2px solid #f50ad5;
    background-color:black;
    margin:80px;
  }
  .button:hover{ /*鼠标移入的时候，动画开始*/
        animation: shine 0.4s linear;
  }
  @keyframes shine{
    0%{
        box-shadow:0 0 0px 0px rgba(245, 10, 213,0.9);
    }
    100%{
        box-shadow:0 0 0px 25px rgba(245, 10, 213,0); 
    }
  }

 

看似炫酷的动画，就这么简单做出来了，发挥想象力，还可以做出更有趣的动画哦。

码字不易，觉得有帮助，请给个赞吧~

另外，文章为原创，如需转载，请注明出处，谢谢！