前端日常实践：39#视频演示如何使用纯CSS制作条纹彩虹心特效
时间：2023-04-05 01:25:44
HTML5
表达对童年的怀念。https://codepen.io/comehop??e/pen/QxbmxJ交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cepNzTW源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含9个：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,navy,black);}定义容器的大小：.heart{width:14em;height:11em;}在布局容器中verticalstripes:.heart{display:flex;证明内容：空间之间；}.heartspan{宽度：1em;背景颜色：浅蓝色；border-radius:0.5em;}为竖条纹颜色，条纹样式是对称的：.heartspan{background-color:var(--c);}.heartspan:nth-child(1),.heartspan:nth-child(9){--c:orangered;}.heartspan:nth-child(2),.heartspan:nth-child(8){--c:gold;}.heartspan:nth-child(3),.heartspan:nth-child(7){--c:limegreen;}.heartspan:nth-child(4),.heartspan:nth-child(6){--c:dodgerblue;}.heartspan:nth-child(5){--c:mediopurple;}设置垂直条纹的高度以形成心形图案：.heartspan{height:var(--h);位置：相对；顶部：var(--t);}.heartspan:nth-child(1),.heartspan:nth-child(9){--h:3em;--t:2.2em;}.heartspan:nth-child(2),.heartspan:nth-child(8){--h:6em;--t:0.6em;}.heartspan:nth-child(3),.heartspan:nth-child(7){--h:8em;--t:0;}.heartspan:nth-child(4),.heartspan:nth-child(6){--h:9em;--t:0.8em;}.heartspan:nth-child(5){--h:9.4em;--t:1.6em;}设置位移动画效果:.heartspan{animation:beating5sinfinite;}@keyframesbeating{0%,30%{top:var(--t);高度：var(--h)；}60%,70%{顶部:25%;高度：50%；}}最后设置动画时条纹的去色、模糊、收窄效果，使用彩色条纹增强对比度：@keyframesbeating{0%,30%{background-color:var(--c);过滤器：模糊（0）；宽度：1em；}60%,70%{背景颜色：淡蓝色；过滤器：模糊（5px）；宽度：0.1em；}}你完成了！
