七夕爱心 特效 前端工程师的温柔 前端工程师- 互联网时代背景下的又一新型职业!在我看来前端工程师是温柔而又浪漫的!以己之长,与用户打交道并为用户带来极致体验。便是他们的工作日常,而正是这种日常,造就了他们的思想是丰富多彩的,性格也会与其他程序猿大有不同!因此前端程序猿便会发挥他们的才能,显示他们的可爱,比如下面我们带来的Css3爱心表白特效。 七夕程序员的礼物 怦然心动 我们看到的动图是三个爱心围绕成一个爱心的形状,然后像心跳一样,扑通扑通的跳 那么接下来我们就分析,首先我们要把三个爱心做出来然后再给它添加动画效果 画爱心 上代码 首先我们可以弄一个正方形 这样我们就得到了一个菱形 得到菱形之后我们就可以画俩个圆 这些都有之后,我们可以以菱形做相对定位,圆形做绝对定位把我们的圆分别放在菱形边上的左上方和右上方 那么这就是我们一个圆的画法了,其他圆都是一样的 接下来就是我们如何把他们摆成一个爱心的形状了,很简单还是通过偏移 摆成爱心的形状之后,接下来就是我们的心跳动画了 我们定义的动画跟我们前面盒子里写的transform:rotate(-45deg)有冲突,我们直接把这个效果写在定义的动画里就行了, 好了,这就是这个爱心表白动画的全部代码了 无论何时见你 我都怦然心动 程序员的浪漫 关注 我们 |
|