前端日常实践：137#视频演示如何用纯CSS制作水波荡漾的抽象动画
时间：2023-04-02 21:01:15
HTML
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览全屏显示。https://codepen.io/comehop??e/pen/MqqqwG互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cJBwwHn源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读定义dom，容器包含9个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.container{width:30em;高度：30em；font-size:10px;}使用网格布局将9个子元素排列成一个3*3的网格：.container{display:grid;grid-template-columns:repeat(3,1fr);}通过伪元素设置容器中子元素的样式：.containerspan{position:relative;}.containerspan::before,.containerspan::在{内容：''之后；位置：绝对；框大小：边框框；边框样式e：nonesolidsolid无；边框宽度：1em；边框颜色：金色；宽度：100%；height:100%;}旋转容器，使其顶端朝上：.container{transform:rotate(-135deg);}增加子元素尺寸由小变大的动画：.containerspan::before,.containerspan::after{animation:animate-scale1.6slinearinfinite;}@keyframesanimate-scale{from{width:1%;高度：1%；}至{宽度：100%；高度：100%；}}添加一个改变子元素边框颜色的动画：.containerspan::before,.containerspan::after{animation:animate-border-color1.6slinearinfinite,animate-scale1.6slinearinfinite;}@关键帧动画边框颜色{0%,25%{边框颜色：番茄；}50%,75%{边框颜色：金色；}100%{边框颜色：黑色；}}增加子元素边框宽度变化动画：.containerspan::before,.containerspan::after{animation:animate-border-width1.6slinearinfinite,animate-border-color1.6slinearinfinite,animate-规模1.6slinearinfinite;}最后，将::after伪元素的动画时间减慢半拍：.containerspan::after{animation-delay:-0.8s;}@keyframesanimate-border-width{0%,100%{边框宽度:0.1em;}25%{边框宽度：1.5em；}}你完成了！
