实现效果：
心动
思路：
1、使用两个圆形和一个正方形拼凑出爱心图案。
2、使用CSS3中的动画效果，为我们的爱心图案添加跳动效果。
疑惑：
1.figure标签？
解答：figure标签，表示独立的流内容，可以是图像，图表等。并且移除其内容不会影响其他页面内容。
2.为什么在@keyframes move{}中需要旋转225度？
解答：在拼凑爱心时，我们已经对下面的正方形旋转45度，如果执行动画过程中不进行旋转225度，会破坏整个爱心图案。通过这两次的旋转可以使下面的正方形回到当初的位置。
HTML代码：
<body><figure><div class="active left"></div><div class="active right"></div><div class="active bottom"></div></figure></body>
CSS代码：
*{margin:0;padding:0;}body{background-color:pink;}/* 修饰最大容器 */figure{position:relative;left:200px;top:200px;}/* 修饰左右两个圆 */.left,.right{width:200px;height:200px;background-color:red;border-radius:50%;position:absolute;}.left{left:-3px;}.right{left:142px;}/* 修饰下面正方形 */.bottom{width:198px;height: 198px;background-color:red;position:absolute;transform:rotate(45deg);top:75px;left:70px;border-radius:8px;z-index:-1;}/* 实现跳动效果 */.active{box-shadow:0 0 15px red;animation:move 1s ease infinite;}@keyframes move{0%{transform:scale(1) rotate(225deg);box-shadow:0 0 20px red;}50%{transform:scale(1.2) rotate(225deg); }100%{transform:scale(1) rotate(225deg); }}
