css初始化_纯CSS制作一颗跳动的小爱心，快去给你喜欢的人表白吧！-CSDN博客

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

具体效果：

https://www.zhihu.com/video/1067511048223051776

1.html代码

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

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

2.CSS代码

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

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

扩展：

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

animation

伪元素：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/JavaScriptgithub.com