前端日常实战：77#视频演示如何用纯CSS制作旗帜飘扬的动画
时间：2023-04-02 17:15:33
HTML
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览在全屏。https://codepen.io/comehop??e/pen/qydvBm互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cD9pLTW源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含15个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明-内容：中心；background-color:black;}定义容器尺寸：.flag{width:10em;高度：15em；font-size:20px;}设置线条样式:.flagspan{width:0.25em;高度：继承；背景颜色：deepskyblue;}制作线条tile:.flag{display:flex;正当的y-content:space-between;}添加3D透视效果:.flag{transform:perspective(500px)rotateY(-20deg);}定义左右移动的动画效果:.flagspan{animation:wave1.5sease-in-out无限交替；}@keyframeswave{to{transform:translateX(2em);}}设置元素变量值：.flagspan:nth-child(1){--n:1;}.flagspan:nth-child(2){--n:2;}/*共15个元素,每个元素的--n变量值等于它的序号*//*中间代码略...*/.flagspan:nth-child(14){--n:14;}.flagspan:nth-child(15){--n:15;}让每一行延迟开始动画，形成旗帜飘扬的效果：.flagspan{animation-delay:calc(var(--n)*-0.1s);}最后添加光影效果：.flagspan{background-color:ghostwhite;}@keyframeswave{to{transform:translateX(2em);背景颜色：深天蓝；}}你完成了！
