前端日常实践：24#视频演示如何用纯CSS制作流畅的层叠波浪效果
时间：2023-03-30 23:12:15
CSS
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览在全屏。https://codepen.io/comehop??e/pen/JvmBdE交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cp2edUD源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含一行文字和3个用于波浪效果：thesea
中心显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(antiquewhite,navajowhite);}设置容器样式：.sea{width:300px;高度：300px；背景颜色：白烟；背景图像：线性渐变（深蓝，rgba（255、255、255、0）80%，rgba（255、255、255、0.5））；边界半径：5px；盒子阴影：02px30pxrgba(0,0,0,0.2);}设置文本样式：.sea{position:relative;}.sea.title{color:white;字体大小：24px；字体系列：衬线；文本对齐：居中；行高：250px;文本转换：大写；字母间距：0.4em；位置：绝对；z-索引：1；width:100%;}动画波浪：.sea.wave{position:absolute;顶部：-250px；左：-100px；宽度：500px；高度：500px；背景：深天蓝；边界半径：43%；过滤器：不透明度（0.4）；动画：漂移线性无限；}.sea.wave:nth-of-type(1){animation-duration:5s;}.sea.wave:nth-of-type(2){animation-duration:7s;}.sea.wave:nth-of-type(3){animation-duration:9s;}@keyframesdrift{from{transform:rotate(360deg);}}增加海浪波动幅度，增加色差：.sea.wave{transform-origin:50%48%;}.sea.wave:nth-of-type(3){background-color:orangered;filter:opacity(0.1);}最后，隐藏容器外的内容：.sea{overflow:hidden;}就大功告成了！
