今年的情人节
让我们比任何时候都更珍惜爱和希望
更懂得那句“一定要注意安全啊~”的肺腑之意
异地恋的依旧异地
同城恋的变成了同城网恋
隔离疫情，但不会隔离爱
我们在Medium上为大家找到了一个可以发送爱心的教程
作者把代码也放到里面了
隔离疫情，但不会隔离爱
2020，依旧【爱你爱你】
如何用CSS为创建一颗跳动的小心心
::after和::before伪元素，我们可以使用单个元素进行绘制。说到伪元素，::after是一个伪元素，它使你可以将内容从CSS插入页面（不需要在HTML中）。::befor也是一样的，只是它content在HTML中的其他任何内容之前而不是之后插入。
1.heart {
2 background-color: red;
3 display: inline-block;
4 height: 50px;
5 margin: 0 10px;
6 position: relative;
7 top: 0;
8 transform: rotate(-45deg);
9 position: absolute;
10 left: 45%; top: 45%;
11 width: 50px;
12}
13
14.heart:before,
15.heart:after {
16 content: "";
17 background-color: red;
18 border-radius: 50%;
19 height: 50px;
20 position: absolute;
21 width: 50px;
22}
23
24.heart:before {
25 top: -25px;
26 left: 0;
27}
28
29.heart:after {
30 left: 25px;
31 top: 0;
32}
::before和::after伪元素的两个圆来定义正方形及其位置。圆圈实际上只是另外2个正方形，其边界半径减小了一半。
1@keyframes heartbeat {
2 0% {
3 transform: scale( 1 );
4 }
5 20% {
6 transform: scale( 1.25 )
7 translateX(5%)
8 translateY(5%);
9 }
10 40% {
11 transform: scale( 1.5 )
12 translateX(9%)
13 translateY(10%);
14 }
15}
2、在20％的时间段内，我们将形状缩放到其初始大小的125％。
3、在40％的时间段内，我们将形状缩放到其初始大小的150％。
最后，我们必须将动画分配给我们。
1.heart {
2 animation: heartbeat 1s infinite; // our heart has infinite heartbeat :)
3 ...
4}
这就是一颗会一直跳动着的心。
👇👇👇
