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 :)...
}

会动的小心心

好啦~

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

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

2020，请你平安地，在我身边相关推荐

2020年平安浙江APP年度运营报告
一.数据概览 (1)总体数据截止2020年12月31日,平安浙江APP累计注册用户13461311,累计爆料量15603091,累计事件量14332950,累计事件结案量14264519,事件结案率 ...
ECCV 2020 谷歌论文盘点—Poster 篇
前文已经盘点了谷歌ECCV 2020 中Oral 和 Spotlight的论文: ECCV 2020 Oral 中谷歌论文盘点,点云与3D方向工作居多 ECCV 2020 Spotlight 谷歌论文 ...
平安居家养老服务上市
深圳2022年3月2日 /美通社/ -- 随着我国社会老龄化程度的加深和居民财富水平的上升,老年人多层次.高品质养老需求不断增长.为进一步推动养老事业和养老产业协同发展,助力老有所养,提升老年群体的获 ...
平安好医生亏损扩大：近6年累计亏47亿，商标败诉后App更名
2月2日,中国平安旗下平安健康医疗科技有限公司(HK :01833,下称平安好医生)发布2020年财报.财报显示,平安好医生2020年营收68.66亿元,净亏损9.485亿元. 具体来看,2020年, ...
平安好医生遭遇困局：六年亏近47亿元价值百亿品牌或被舍弃
作者 | 李宏晶来源 | 雷达财经平安好医生2015年成立以来连续六年亏损,合计亏损46.78亿元.除了巨亏,公司在去年还遭遇了高管震荡,多名创始高管退出.在与好医生集团就"好医生&qu ...
第1讲流程入门-平安开放平台账号申请和审核
一.登陆平安开放平台,创建第三方应用测试环境地址:http://test-api.pingan.com.cn:20080 生产环境地址:http://api.pingan.com.cn a)进入菜单 ...
平安健康七年亏损62亿元：首席财务官换人未公告，市值屡创新低
3月15日,平安集团旗下互联网医疗健康平台平安健康(也称"平安好医生", HK:01833)发布2021年年报.年报显示,平安好医生2021年营收为73.34亿元,较2020年同期 ...
汽车之家迎来“空降”高管，原平安产险副总经理龙泉取代陆敏任职
1月12日,汽车之家发布公告称,任命龙泉为公司董事长兼CEO,全面负责公司的经营管理工作,而原汽车之家董事长兼CEO陆敏按计划退任,以探索办公生活以外的新领域. 资料显示,龙泉于1998年加入平安集团 ...
怎样拥有心灵的平和？获得一颗全新的心灵
在这个大千世界中,每个人都在积极努力.在这个过程中,有人辉煌,有人悲伤,有人抑郁焦虑,有人青春飞扬.有人失去了自己的个性,有人丢失了自己的初心,有人忘记了自己当初出发的原点. 在这人世间有人住高楼,有 ...

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

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

2020，请你平安地，在我身边相关推荐

最新文章

热门文章