效果预览点击右侧“点击预览”按钮在当前页面预览,点击链接全屏预览。https://codepen.io/comehop??e/pen/LmrZVX互动视频教程本视频为互动视频,您可以随时暂停视频,编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cPd9asV源码下载请到github下载。https://github.com/comehop??e/f...代码解读定义dom,描绘了一个8行9列的心形像素图案,其中指的是要填充颜色的像素:<点><dot><点><点>/div>居中显示:html,body{height:100%;显示:弹性;对齐项目:居中;证明内容:居中;background:linear-gradient(silver,white);}设置心的风格:.心脏{显示:网格;网格模板列:重复(9、1fr);grid-gap:2px;}.heart>*{width:1em;高度:1em;边界半径:0.1em;font-size:30px;}.heartdot{background:red;}定义淡入淡出动画:.heartdot{filter:opacity(0);动画:动画5s缓出无限;}@keyframes动画{0%{滤镜:不透明度(0);转换:translateY(-10em);}25%{过滤器:不透明度(1);转换:翻译Y(0);}75%{过滤器:不透明度(1);转换:翻译Y(0);}100%{过滤器:不透明度(0);变换:翻译Y(10em);}}最后,让每个像素在不同的时间进入,以增强动画效果:.heartdot:nth-of-type(2n){animation-delay:0.2s;}.heartdot:nth-of-type(3n){animation-delay:0.3s;}.heartdot:nth-of-type(4n){animation-delay:0.4s;}.heartdot:nth-of-type(5n){animation-delay:0.5s;}.heartdot:nth-of-type(6n){animation-delay:0.6s;}.heartdot:nth-of-type(7n){animation-delay:0.7s;}.heartdot:nth-of-type(8n){animation-delay:0.8s;}.heartdot:nth-of-type(9n){animation-delay:0.9s;}.heartdot:nth-of-type(10n){animation-delay:1.0s;}.heartdot:nth-of-type(11n){animation-delay:1.1s;}你完成了!知识点grid-template-columnshttps://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columnsgrid-gaphttps://developer.mozilla.org/en-US/docs/网络/CSS/网格-gap:nth-of-type()https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-typeanimation-delayhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-delaytranslateY()https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateYfilterhttps://developer.mozilla.org/en-US/文档/Web/CSS/过滤器