当前位置: 首页 > Web前端 > CSS

css3动画实现波纹动画

时间:2023-03-31 13:30:31 CSS

实际效果实际代码//html

//less.comment{宽度:1200像素;高度:100vh;边距:100px自动;背景色:紫色;.ima{浮动:正确;位置:相对;宽度:816px;高度:910px;背景色:#fff;.cc{位置:绝对;宽度:20px;高度:20px;o容量:1;背景色:#9cdeff;边界半径:50%;顶部:50%;左:49.5%;转换:翻译(-50%,-50%);动画:循环移动4s无限线性;}。cc1{动画:循环移动4s1s无限线性;}.cc2{动画:循环移动4s2s无限线性;}.cc3{动画:循环移动4s3s无限线性;位置:绝对;z-指数:999;}}}@keyframescircularmove{0%{宽度:20px;高度:20px;不透明度:1;}100%{宽度:816px;高度:910px;不透明度:0;}}ProjectExplanation上面的代码只是项目的一部分,但是可以完整清晰的说明上面的问题。您可以直接分配代码并查??看效果。如果大家发现其中有什么问题,请慷慨提出,大家共同进步。