前言：今天我们就不写js代码，我们利用css来实现一个跳动的爱心。有喜欢的人赶紧用它去表白吧。

具体效果：

1.html代码

这是有史以来最简单的html代码了，只有一个div，这也不难理解，页面上只有一个爱心，当然只有一个div了

<div class="heart"></div>


2.CSS代码

这才是我们的重头戏，跟著我一起来一步一步实现吧：

<style>
/* 设置一个初始的宽高 */
html,body {
width: 100%;
height: 100%;
}
/* 给body初始化一些样式，并且设置为flex盒子 */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(190, 153, 153);
}
/* 给我们的爱心设置一下样式，并且初始化动画 */
.heart {
width: 60px;
height: 60px;
background-color: rgb(221, 35, 35);
position: relative;
animation: beat .6s infinite ease-in;
}
/* 利用为元素,分别添加两个圆，为了看出差别，颜色先不一样*/
.heart:before,.heart:after{
content: ;
position: absolute;
width: 60px;
height: 60px;
background-color: rgb(206, 99, 99);
border-radius: 50%;
}
/* 设置两个伪元素的位置 */
.heart:before{
left: 30px;
}
.heart:after {
top: -30px;
}
</style>


这里我们对爱心进行了一些初步的设置，可是这啥效果也没有啊！别急，后面的动画才是我们的重头戏：

扩展：

animation动画：这是css3的动画属性，不熟悉的同学可以了解一下。

伪元素：CSS 伪元素用于向某些选择器设置特殊效果。

好了，我们继续写代码，实现我们的动画：

<style>
/* 设置一个初始的宽高 */
html,body {
width: 100%;
height: 100%;
}
/* 给body初始化一些样式，并且设置为flex盒子 */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(190, 153, 153);
}
/* 给我们的爱心设置一下样式，并且初始化动画 */
.heart {
width: 60px;
height: 60px;
background-color: rgb(221, 35, 35);
position: relative;
animation: beat .6s infinite ease-in;
}
/* 利用为元素,分别添加两个圆，为了看出差别，颜色先不一样*/
.heart:before,.heart:after{
content: ;
position: absolute;
width: 60px;
height: 60px;
background-color: rgb(221, 35, 35);
border-radius: 50%;
}
/* 设置两个伪元素的位置 */
.heart:before{
left: 30px;
}
.heart:after {
top: -30px;
}
/* 定义beat动画 */
@keyframes beat {
0%{
transform:scale(1) rotate(-45deg);
}

40%{
transform:scale(1) rotate(-45deg);
}

55%{
transform:scale(1.3) rotate(-30deg);
}

70%{
transform:scale(1) rotate(-45deg);
}

85%{
transform:scale(1.3) rotate(-60deg);
}

100%{
transform:scale(1) rotate(-45deg);
}
}
</style>

注释：0% 是动画的开始，100% 是动画的完成。

结束语：到这里我们就完成了小爱心的制作，这里面涉及到的几个我认为主要的点如下：

1.伪元素的使用

2.css3动画的使用

需要源代码的小伙伴请移步这里：

Hacker233/JavaScript?

github.com
推荐阅读：

相关文章