1. 首页
  2. IT资讯

2020,请你平安地,在我身边

2020,请你平安地,在我身边

今年的情人节

让我们比任何时候都更珍惜爱和希望

更懂得那句“一定要注意安全啊~”的肺腑之意

异地恋的依旧异地

同城恋的变成了同城网恋

2020,请你平安地,在我身边

隔离疫情,但不会隔离爱

我们在Medium上为大家找到了一个可以发送爱心的教程

作者把代码也放到里面了

隔离疫情,但不会隔离爱

2020,依旧【爱你爱你】

2020,请你平安地,在我身边

如何用CSS为创建一颗跳动的小心心

每年2月14日,很多人都会选择用交换卡片、糖果、礼物或鲜花来向喜欢的人表达心意。

但是程序员在情人节可以为他们的爱人做什么呢?

我的答案是:使用CSS并发挥创造力!

我真的很喜欢CSS。它其实并不是一种复杂的语言(大多数时候甚至都不被认为是编程语言)。但是,通过运用一些几何、数学和基本的CSS规则,就可以将浏览器变成具有创造力的画布!

所以,让我们开始吧。如何创建具有纯几何形状的桃心?

由正方形和两个圆圈组成的心

可以看到,其实我们只需要一个正方形和两个圆形。

借助 ::after ::before 伪元素,我们可以使用单个元素进行绘制。说到伪元素, ::after 是一个伪元素,它使你可以将内容从CSS插入页面(不需要在HTML中)。 ::befor 也是一样的,只是它 content 在HTML中的其他任何内容之前而不是之后插入。

对于这两个伪元素,最终结果实际上并不是在DOM中,而是在页面上显示,就好像它是在页面上一样。

接下来,就让我们来创建自己的小桃心吧~

   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}

用CSS创造一颗心

可以看到,通过使用主要的“心”类以及带有 ::before ::after 伪元素的两个圆来定义正方形及其位置。圆圈实际上只是另外2个正方形,其边界半径减小了一半。

但是心怎么能不跳动呢?

让我们创建一个脉冲。在这里,我们将使用@关键帧规则。@关键帧 CSS规则用于定义CSS动画一个周期的行为。

使用关键帧规则时,我们可以将时间段划分为较小的部分,并通过将其分成多个步骤来创建转换/动画(每个步骤对应于该时间段完成的百分比)。

创建心跳动画包括3个步骤:

   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}

创建心跳动画

1、在0%的时间段内,我们不进行任何转换。

2、在20%的时间段内,我们将形状缩放到其初始大小的125%。

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

最后,我们必须将动画分配给我们。

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

会动的小心心

好啦~

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

2020,请你平安地,在我身边

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

2020,请你平安地,在我身边

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69912185/viewspace-2675804/,如需转载,请注明出处,否则将追究法律责任。

主题测试文章,只做测试使用。发布者:深沉的少年,转转请注明出处:http://www.cxybcw.com/182070.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code