CSS欺骗海浪动态效果？，这可能是最简单的实现方式吧？
时间：2023-03-30 18:28:07
CSS
fancycanvas的实现太繁琐，这就是本文的意思。拆解效果图，先画一个简单的盒子：用::before和::after画两个不同圆角值（半径）的不规则圆：在父元素上设置overflow:hidden最后加上动画旋转两个不规则圆圈？代码html
scss//simplebox.wave{position:relative;宽度：150px；高度：150px；背景色：#5291e0；溢出：隐藏；//两个不规则的圆圈（相对于方框定位，距底部的距离为波高）&::before,&::after{content:"";位置：绝对；左：50%；底部：15%；宽度：500%；高度：500%；边界半径：45%；背景色：#fff；转换：translateX(-50%);//居中动画：旋转15s线性无限；}//调整其中一个不规则圆圈的样式以区分它们（或调整动画参数以区分它们）&::before{bottom:10%;不透明度：.5;边界半径：47%；}}}//旋转动画@keyframesrotate{from{transform:translateX(-50%)rotateZ(0deg);}to{变换：translateX(-50%)rotateZ(360deg);}}效果图总结乍一看，“蓝”部分确实很难动，所以用逆向思维，直接操作“白”部分，然后溢出：hidden成功偷梁换柱，好舒服非常？最后本文到此结束，希望以上内容对你有帮助。喜欢的话记得点赞关注哦。更多精彩内容关注微信公众号“不会写前端”，不定期更新最新实用的前端技巧/技术文章。欢迎关注?
