纯CSS实现水波纹的电池充电动画特效( 二 ) _生活百科

文章插图

水波纹特效这个特效相信大家都见过，其思想就是在上面的大概位置上设置背景颜色，用相同的底色覆盖，
然后用到translate这个属性，通过转化x、y值，然后通过不停的旋转角度，至于数值为啥是这个值，我也搞不清楚。。。有知道的小伙伴可以在评论区留言.
p{ //复盖 border-radius: 45% 47% 44% 42%; transform: translate(-50%, 0); animation: move 10s linear infinite;}@keyframes move { 100% { transform: translate(-50%, -160px) rotate(720deg); }}

文章插图

此时，我们发现这个效果并不太真实，进行多覆盖两个，改变旋转值和border-radius的值来设置水面不重叠，但又有差距的效果
p{ &:nth-child(2){ border-radius: 38% 46% 43% 47%; transform: translate(-50%, 0) rotate(-135deg); } &:nth-child(3){ border-radius: 42% 46% 37% 40%; transform: translate(-50%, 0) rotate(135deg); }}此时的效果就非常真实了