效果预览在当前页面点击右侧“点击预览”按钮预览，在中点击链接预览全屏。https://codepen.io/comehop??e/pen/KLvENb互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cJ8vrMt2源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读1、画一个点定义dom结构，只有一个dom元素名为.heart:让元素居中显示，设置页面背景颜色到浅粉色渐变：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(lightpink,white);}画一个红点：.heart{font-size:30px;宽度：1em；高度：1em；背景色：红色；边界半径：50%；2.制作点阵图形及其投影我们需要制作一个点阵图形。67号作品申请中使用了该技术。原理是利用box-shadow的特性。如果您已经了解此技术，则可以直接滚动到下一部分。如果还是不明白，可以通过做下面的小实验来理解。给.heart设置如下阴影，红点右边会出现一个大小相等的黑点：.heart{box-shadow:1.1em0;}继续在红点左边画一个黑点reddot:.heart{box-shadow:1.1em0,-1.1em0;}继续，在红点下面画一个黑点：.heart{box-shadow:1.1em0,-1.1em0,01.1em;}然后在红点上画一个黑点：.heart{box-shadow:1.1em0,-1.1em0,01.1em,0-1.1em;}现在你可以看到4个黑点形成一个十字，红点就在这个十字的交点上。这个技巧就是把屏幕看成一个以红点为原点的平面坐标系。右侧水平方向为正，垂直方向为正，与浏览器坐标系一致。每个shadow属性值可以画一个点，因为box-shadow可以接收多个属性，所以可以用多个点画一个位图。为了使代码更直观，我们可以将代码的布局安排成与图案的形状相同。box-shadow的以下四个属性值用来画十字：.heart{box-shadow:0-1.1em,-1.1em0,1.1em0,01.1em;}因为没有颜色为阴影指定，默认为黑色。如果你想把它变成红色，你不需要在box-shadow中赋值。基于CSS的继承原则，可以直接给元素指定一种颜色，阴影使用相同的颜色：.heart{color:red;background-color:currentColor;}红色太亮了，说一下它的颜色：.heart{color:hsla(0,100%,50%,0.6);}接下来，用另一个技巧用drop复制整个图案-shadow():.heart{filter:drop-shadow(3.3em2.2emdodgerblue);}3.绘制心形图案有了以上知识储备，画出心形图案只是时间问题。花点时间在纸上画图数数，然后就可以制作点阵图案了。这里用到的心形是9*8点阵的：.heart{--heart-shape:-3.3em-3.3em,-2.2em-3.3em,2.2em-3.3em,3.3em-3.3em,-4.4em-2.2em,-3.3em-2.2em,-2.2em-2.2em,-1.1em-2.2em,1.1em-2.2em,2.2em-2.2em,3.3em-2.2em,4.4em-2.2em,-4.4em-1.1em,-3.3em-1.1em,-2.2em-1.1em,-1.1em-1.1em,0em-1.1em,1.1em-1.1em,2.2em-1.1em,3.3em-1.11.1em-2.2em1.1em,1.1em2.2em,2.2em2.2em,-1.1em3.3em,0em3.3em,1.1em3.3em,0em4.4em;箱鲥鱼ow:var(--heart-shape);}哈哈，这一大段代码确实让人眼花缭乱，但是在编辑器里看的话，是心形的，像下面这样，这就是传说中说的么所见即所得：至此，我们得到了一颗红心和一颗蓝心4.设计动画效果定义2组关键帧，分别用于红心和蓝心。红色心的边框效果是box-shadow属性的代码，蓝色心心的边框效果是drop-shadow()的代码：.heart{/*box-shadow:var(--心形）；*//*颜色：hsla(0,100%,50%,0.6);*//*过滤器：阴影（3.3em2.2emdodgerblue）；*/}@keyframesheart-one{到{box-shadow:var(--heart-shape);颜色：hsla(0,100%,50%,0.6);}}@keyframesheart-two{to{filter:drop-shadow(3.3em2.2emdodgerblue);}}最后，定义动画属性，注意蓝色的心有0.3s的延迟：.heart{animation:heart-one1sinfinitealternatecubic-bezier(0.5,1.7,0.5,1.5),heart-two1s0.3sinfinitealternatecubic-bezier(0.5,1.7,0.25,1);}大功告成！
