炫酷 css实现水波纹

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情 ui设计的元素有时候需要有一些动画效果，可以直接用css动画来实现。

实现一个中心圆向四周有水波纹的效果

利用定位添加多个圆，给他们加上动画，使得依次从小变大，这样就形成了逐渐外扩的动画效果

（一）中间圆

绘制中间的圆

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.logo {     width: 80px;     height: 80px;     background: #7EC4FC;     color: #fff;     text-align: center;     line-height: 80px;     border-radius: 50%;     position: absolute;     top: 310px;     left: 0;     right: 0;     margin: 0 auto;     z-index: 9; }

　　

（二）水波纹最大的圆

绘制水波纹最大可扩大的圆的大小

?

1 2 3 4 5 6 7 8 9 10 11

.animate-wave {     width: 500px;     height: 500px;     position: absolute;     top: 100px;     left: 0;     right: 0;     margin: 0 auto;     background: #C3E4FF;     border-radius: 50%; }

　　

要实现4个个依次扩大的水波纹效果

?

1 2 3 4 5 6

<div class="animate-wave">     <div class="w1"></div>     <div class="w2"></div>     <div class="w3"></div>     <div class="w4"></div> </div>

 

（三）水波纹动画

设置动画，0%的时候是宽高为0，逐渐增大，100%时候增大到最大，依次添加动画延迟，这样就有水波纹的效果了

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

@-webkit-keyframes opac {     from {         opacity: 1;         width: 0;         height: 0;         top: 50%;         left: 50%;     }       to {         opacity: 0;         width: 100%;         height: 100%;         top: 0;         left: 0;     } }   .animate-wave * {     background: #C3E4FF;     position: absolute;     border-radius: 50%;     animation: opac 4s infinite; }   .animate-wave .w2 {     animation-delay: 1s; }   .animate-wave .w3 {     animation-delay: 2s; }   .animate-wave .w4 {     animation-delay: 3s; }

　

（四）最终效果

图片实现水波纹

观察这个效果，是有从中间逐渐向外扩的效果 定义水波纹标签

?

1 2 3 4 5 6

<div class="w w5"></div> <div class="w w4"></div> <div class="w w3"></div> <div class="w w2"></div> <div class="w w1"></div> <div class="w w0"></div>

　　

（一）初始圆

.w{
    position: absolute;
    top: calc((100% - 50px)/2);
    left: calc((100% - 50px)/2);
    width: 50px;
    height: 50px;
    border-radius: 500px;
    background: url('../img/2.jpg') fixed center center;
}

 

效果

（二）水波纹

div盒子的class设置为“w0-5”，给它样式设置设置图像的z-index属性；再给background-size属性指定背景图像的大小；动画animation绑定到一个<div>元素，只要把六个div叠在一起，搭配CSS的animation，就可以让六个div依序出现

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

.w0{     z-index: 2;     background-size: auto 106%;     animation: w 1s forwards; }   .w1{     z-index: 3;     background-size: auto 102%;     animation: w 1s .2s forwards; }   .w2{     z-index: 4;     background-size: auto 104%;     animation: w 1s .4s forwards; }   .w3{     z-index: 5;     background-size: auto 101%;     animation: w 1s .5s forwards; }   .w4{     z-index: 6;     background-size: auto 102%;     animation: w 1s .8s forwards; }   .w5{     z-index: 7;     background-size: auto 100%;     animation: w 1s 1s forwards; }

　　

（三）动画效果

通过@keyframes规则，创建动画是通过逐步改变0％是开头动画，100％是当动画完成

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@keyframes w{     0%{         top: calc((100% - 50px)/2);         left: calc((100% - 50px)/2);         width: 50px;         height: 50px;     }       100%{         top: calc((100% - 500px)/2);         left: calc((100% - 500px)/2);         width: 500px;         height: 500px;     } }

　　

（四）最终效果