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%);
  }
}

建立心跳动画

一、在0％的时间段内，咱们不进行任何转换。

二、在20％的时间段内，咱们将形状缩放到其初始大小的125％。

三、在40％的时间段内，咱们将形状缩放到其初始大小的150％。在剩下的60％的时间里，咱们留出时间让心脏恢复到初始状态。

最后，咱们必须将动画分配给咱们。

.heart {
  animation: heartbeat 1s infinite; // our heart has infinite heartbeat :)
  ...
}

会动的当心心

好啦~

这就是一颗会一直跳动着的心。

欢迎点击“京东云”了解更多精彩内容