今年的情人节，让我们比以往更加珍惜爱情和希望爱情变成了同城网恋。隔离疫情，隔离不了爱情。我们在Medium上找到了一个教程，适合所有可以发送爱心的人。作者也把代码放在里面了。隔离疫情，隔离不了爱情。2020，依旧【LoveYouloveyou】如何用CSS制作一颗跳动的小心脏每年的2月14日，很多人都会选择通过交换卡片、糖果、礼物或鲜花的方式来向心爱的人表达心意。但是程序员在情人节可以为心上人做些什么呢？我的答案是：使用CSS并发挥创意！我真的很喜欢CSS。它实际上并不是一门复杂的语言（大多数时候它甚至不被认为是一种编程语言）。但是，通过应用一些几何、数学和基本CSS规则，您可以将浏览器变成创意画布！那么，让我们开始吧。如何用纯几何形状创建心形？一个正方形和两个圆组成的心形可以看出我们只需要一个正方形和两个圆。在::after和::before伪元素的帮助下，我们可以使用单个元素进行绘图。说到伪元素，::after是一种伪元素，它允许您将CSS中的内容插入到页面中（不需要在HTML中）。::befor做同样的事情，除了它在HTML中的任何其他内容之前而不是之后插入内容。有了这两个伪元素，最终的结果实际上并不在DOM中，而是像在页面中一样显示在页面上。接下来，我们来创建自己的心吧~.heart{background-color:red;显示：内联块；高度：50px；边距：010px；位置：相对；顶部：0；变换：旋转（-45deg）；位置：绝对；左：45%；顶部：45%；宽度：50px;}.heart:before,.heart:after{content:"";背景色：红色；边界半径：50%；高度：50px；位置：绝对；宽度：50px;}.heart:before{top:-25px;left:0;}.heart:after{left:25px;top:0;}用CSS创建一颗心如您所见，正方形及其位置是通过使用主要的“heart”类和两个带有::before和::after伪元素的圆来定义的。圆圈实际上只是边界半径减半的另外2个正方形。但心怎能不跳动呢？让我们创造一个脉冲。在这里，我们将使用@keyframe规则。@keyframeCSS规则用于定义CSS动画循环的行为。使用关键帧规则时，我们可以将时间段划分为更小的部分，并通过将其划分为步骤来创建过渡/动画（每个步骤对应于该时间段的完成百分比）。创建心跳动画包括3个步骤：@keyframesheartbeat{0%{transform:scale(1);}20%{transform:scale(1.25)translateX(5%)translateY(5%);}40%{transform:scale(1.5)translateX(9%)translateY(10%);}}创建心跳动画1.在0%时间段，我们不做任何翻译。2.对于20%的时间段，我们将形状缩放到其初始大小的125%。3.对于40%的时间段，我们将形状缩放到其初始大小的150%。在剩下的60%的时间里，我们让心脏有时间恢复到初始状态。最后，我们必须将动画分配给我们。.heart{动画：心跳1s无限;//我们的心有无限的心跳:)...}让我们有一颗动人的心~这是一颗不停跳动的心。欢迎点击“京东云”了解更多精彩内容
