开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情
前言
今天是情人节，但是作为单身人士，好像今天没有任何特殊的，仍然是上班下班回来写文章，但是我们也可以特殊一些，比如写文章的主题可以换成喜庆一点的，然后文章内容也换成和情人节息息相关的，比如用css画一个爱心，再去参考大佬们的动画效果，模仿一个会摇摆跳动的爱心。
正篇
首先我们写HTML，
这部分比较简单,用到几个常用的标签：
- head HTML头部，里面一般放一些用来申明使用的脚本语言，以及网页传输时使用的方式等，与 meta配合使用
- body 一般用来定义文档的主体，包含文档的所有内容，如文字，图片之类的。
- meta head里面的一个辅助性标签，通常位于文档的头部，是不包含任何内容的，标签的属性定义了与文档相关联的名称/值对，meta元素可提供相关页面的元信息。
- div 也是HTML中很常用的标签，层叠样式表单元的位置和层次，用来区分层次与图层，将文档划分块级，方便属性的添加。
我们先在head标签内引用meta标签加入viewport视口，这样我们就可以使用视口属性和vm单位，使用设备宽和初始缩放1.0，然后在boody中加上class为love的div标签盒子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
</head>
<body>
<div class='love'></div>
</body>
</html>
完成我们的HTML后，我们就开始写CSS，用来为我们的HTML中的div增添样式与动画，首先我们将id与class名写好并加上{}，然后我们就能在{}中添加我们的样式属性，比如html的样式我们给设置padding为0与margin为0，就是内边距和外边距都为0的意思，然后body中我们添加了10vw的padding，
最后我们去完成最为复杂的love,这也是我们画这个图案的最重要的部分，我们采用transform去翻转从而获得爱心的上面两个类似圆形的图案，再与下面的长方形拼接，得到爱心，再设置动画animation与transform旋转缩放实现跳动与摇摆效果：
html {
padding: 0;
margin: 0;
}
body {
padding: 10vw;
}
.love {
width: 5vw;
height: 5vw;
background-color: red;
transform: rotate(45deg);
box-shadow: 0 0 1vw 0 red;
animation: heartbeat 3s infinite;
}
.love::after, .love::before {
content: '';
width: 5vw;
height: 5vw;
border-radius: 50%;
position: absolute;
background-color: red;
box-shadow: 0 0 1vw 0 red;
}
.love::after {
right: 2.5vw;
}
.love::before {
top: -2.5vw;
}
@keyframes heartbeat {
0% {
transform: rotate(45deg) scale(1);
}
25% {
transform: rotate(0deg) scale(1.2);
}
50% {
transform: rotate(45deg) scale(1.5);
}
75% {
transform: rotate(90deg) scale(1.2);
}
100% {
transform: rotate(45deg) scale(1);
}
}
在heartbeat动画animation中，我们用transform对rotate属性设置角度，scale设置缩放比，实现了摇动与缩放,为了实现比较丝滑，我们将整个动画过程分为四个部分，于是我们在动画中的0%、25%、50%、75%、100%进程中添加不同状态，使其呈现出四种变化，周而复始。
除此以外，而在love中我们还设置了box-shadow，添加了阴影样式，它能让爱心看起来没那么锐利直板，也更加好看。
下面是码上掘金的效果，在页面左上角有一个爱心可以边摇动边跳动：
定位不是很好，但毕竟还是才开始试着去做，还是自我感觉挺好的。
总结
CSS动画和翻转效果还是很好玩的，可以组合成很多图形与对应的效果实现，经常使用就能够熟练使用它们。
