40行代码，纯CSS3实现一颗跳动的心！

MOMO有话要说

大家好，我是MOMO，今天跟大家分享CSS3一些新特性，希望对大家编程内功有所帮助。我们将会不断的推出Java、C++/C、Python、Linux、系统运维等有关编程技术的视频，敬请期待

CSS3出来之前，做一个动画效果都要是用flash去实现；而如今轻轻松松几行代码可以搞定，无疑是增强了前端开发的效率。就让MOMO带着大家一起走进随心而动的世界吧。

实现思路

一、定义一个背景

如图片所示，我们需要绘画一个背景，背景颜色为粉红色。是用div标签实现。

二、绘心

接下来就是我们的重头戏，这里分为3个步骤实现。先要确定心摆放的位置，然后分别描绘两颗半心。

1.定位

2.绘画左半边心

一颗心实际上由两颗半边心完成的，如图所示，我们需要定义一个块级元素，通过设置圆角属性和旋转来完成。

2.1 CSS样式定义

2.3 设置圆角属性和旋转

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

3.绘画右半边心

左半边的心描绘出来后，右半边的实现就会简单很多，是一样的套路。只需要修改旋转的方向既可。

由此可见，两颗心已经就紧紧靠在一起啦！

4.两颗半边心完美结合

最后把多余的边框去掉，把两颗半边心的颜色设置为一样，就完美实现啦。现在看来，是不是很简单呢？

那么，问题来了？

如何实现跳动呢？

这就需要设置动画属性了！

三、动画(让心跳动起来)

3.1 观察

一颗心的跳动是有规律的

先是保持不动，再到向前跳动，然后再还原不动，这里就是一颗心跳动起来的效果，那么这三种状态就可以用关键帧keyframes来定义。

3.2 设置关键帧

/*定义关键帧列表，实现 跳动的效果*/

@-webkit-keyframeshearttd{

/*以百分比来分配样式效果，此处分为三个状态*/

%{

/*保持不变*/

-webkit-transform:scale(1);

}

50%{

/* transform 对元素进行旋转(translate)、缩放(scale)、移动(rotate)或倾斜(skew)。scale(1.5):表示该元素放大至1.5倍，原始属性为1。

*/

-webkit-transform:scale(1.5);

}

100%{

-webkit-transform:scale(1);

}

}

3.3使用关键帧

.heart{

/* 动画:animation，

关键帧列表名称：hearttd，

所需花费的时间秒：1.5s，

播放关键帧次数,infinte表示循环播放。

*/

-webkit-animation:hearttd1.5sinfinite;

width:120px;

height:120px;

position:absolute;/*使用定位属性来定位*/

top:300px;

left:120px;

/*border: 1px solid;/* 设置边框，后期会删除*/*/

}

四、练习

制作一颗跳动的心并不难，难的是思路。那么，接下来你可以完成如下效果吗？

到此，分享结束，敬请期待下次分享，如有疑惑可关注公众号与站长联系。

想学习巫老师录制的高等数学，请点击以下链接：

关注编程攻略微信公众号，与你分享编程技术知识，和IT最新咨询。