程序猿界的romantic-前端工程师

七夕爱心

特效

前端工程师的温柔

前端工程师- 互联网时代背景下的又一新型职业！在我看来前端工程师是温柔而又浪漫的！以己之长，与用户打交道并为用户带来极致体验。便是他们的工作日常，而正是这种日常，造就了他们的思想是丰富多彩的，性格也会与其他程序猿大有不同！因此前端程序猿便会发挥他们的才能，显示他们的可爱，比如下面我们带来的Css3爱心表白特效。

七夕程序员的礼物  怦然心动

我们看到的动图是三个爱心围绕成一个爱心的形状，然后像心跳一样，扑通扑通的跳

那么接下来我们就分析，首先我们要把三个爱心做出来然后再给它添加动画效果

画爱心  上代码

首先我们可以弄一个正方形

这样我们就得到了一个菱形

得到菱形之后我们就可以画俩个圆

这些都有之后，我们可以以菱形做相对定位，圆形做绝对定位把我们的圆分别放在菱形边上的左上方和右上方

那么这就是我们一个圆的画法了，其他圆都是一样的

接下来就是我们如何把他们摆成一个爱心的形状了，很简单还是通过偏移

摆成爱心的形状之后，接下来就是我们的心跳动画了

我们定义的动画跟我们前面盒子里写的transform：rotate（-45deg）有冲突，我们直接把这个效果写在定义的动画里就行了，

好了，这就是这个爱心表白动画的全部代码了

无论何时见你  我都怦然心动

程序员的浪漫

来自温柔又浪漫前端程序员

关注 我们

你的每个赞和在看，我都喜欢！