2020，请你平安地，在我身边
今年的情人节
让我们比任何时候都更珍惜爱和希望
更懂得那句“一定要注意安全啊~”的肺腑之意
异地恋的依旧异地
同城恋的变成了同城网恋
隔离疫情，但不会隔离爱
我们在Medium上为大家找到了一个可以发送爱心的教程
作者把代码也放到里面了
隔离疫情，但不会隔离爱
2020，依旧【爱你爱你】
如何用CSS为创建一颗跳动的小心心
每年2月14日，很多人都会选择用交换卡片、糖果、礼物或鲜花来向喜欢的人表达心意。
但是程序员在情人节可以为他们的爱人做什么呢？
我的答案是：使用CSS并发挥创造力！
我真的很喜欢CSS。它其实并不是一种复杂的语言（大多数时候甚至都不被认为是编程语言）。但是，通过运用一些几何、数学和基本的CSS规则，就可以将浏览器变成具有创造力的画布！
所以，让我们开始吧。如何创建具有纯几何形状的桃心？
由正方形和两个圆圈组成的心
可以看到，其实我们只需要一个正方形和两个圆形。
借助::after和::before伪元素，我们可以使用单个元素进行绘制。说到伪元素，::after是一个伪元素，它使你可以将内容从CSS插入页面（不需要在HTML中）。::befor也是一样的，只是它content在HTML中的其他任何内容之前而不是之后插入。
对于这两个伪元素，最终结果实际上并不是在DOM中，而是在页面上显示，就好像它是在页面上一样。
接下来，就让我们来创建自己的小桃心吧~
.heart {
background-color: red;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}用CSS创造一颗心
可以看到，通过使用主要的“心”类以及带有::before和::after伪元素的两个圆来定义正方形及其位置。圆圈实际上只是另外2个正方形，其边界半径减小了一半。
但是心怎么能不跳动呢？
让我们创建一个脉冲。在这里，我们将使用@关键帧规则。@关键帧 CSS规则用于定义CSS动画一个周期的行为。
使用关键帧规则时，我们可以将时间段划分为较小的部分，并通过将其分成多个步骤来创建转换/动画（每个步骤对应于该时间段完成的百分比）。
创建心跳动画包括3个步骤：
@keyframes heartbeat {
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 {
animation: heartbeat 1s infinite; // our heart has infinite heartbeat :)
...
}会动的小心心
好啦~
这就是一颗会一直跳动着的心。
欢迎点击“京东云”了解更多精彩内容
