css实现水波纹

2024-02-10 00:39| 来源: 网络整理| 查看: 265

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

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

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

（一）中间圆

绘制中间的圆

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

（二）水波纹最大的圆

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

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

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

（三）水波纹动画

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

@-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; } （四）最终效果

图片实现水波纹

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

（一）初始圆 .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叠在一起，搭配CSS的animation，就可以让六个div依序出现

.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％是当动画完成

@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; } } （四）最终效果

【本文地址】

css实现水波纹

css实现水波纹

今日新闻

推荐新闻