2、div盒子的class设置为“.wave
”给它样式设置添加元素绝对定位,语法“position:absolute;left:100px;top:150px
”;宽度设置为30px
,高度设置为30px
;给div
元素添加圆角的边框border-radius
属性。
代码示例
.wave{ position:absolute; top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); width:30px; height:30px; border-radius:300px; }
3、div盒子的class设置为“wave0-5”给它样式设置设置图像的z-index
属性;再给background-size
属性指定背景图像的大小;动画animation
绑定到一个
div
叠在一起,搭配CSS的animation
,就可以让六个div
依序出现。代码示例
.wave0{ z-index:2; background-size:auto 106%; animation:w 1s forwards; } .wave1{ z-index:3; background-size:auto 102%; animation:w 1s .2s forwards; } .wave2{ z-index:4; background-size:auto 104%; animation:w 1s .4s forwards; } .wave3{ z-index:5; background-size:auto 101%; animation:w 1s .5s forwards; } .wave4{ z-index:6; background-size:auto 102%; animation:w 1s .8s forwards; } .wave5{ z-index:7; background-size:auto 100%; animation:w 1s 1s forwards; }
4、通过@keyframes
规则,创建动画是通过逐步改变0%
是开头动画,100%
是当动画完成,注意: 使用animation
属性来控制动画的外观,还使用选择器绑定动画。
@keyframes w{ 0%{ top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); width:30px; height:30px; } 100%{ top:calc((100% - 300px)/2); left:calc((100% - 300px)/2); width:300px; height:300px; }
ok,代码完成
完整代码
感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用CSS制作水波纹效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!