心形是一个非常流行的形状,在这片文章里我们将使用纯css画出心形,然后使用css动画实现心动的效果.
在此之前,我们必须要了解伪元素::after 和 ::before的作用,::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。
在下面的例子里, :before 伪类元素用来给 class 为heart的元素添加一个正方形。
.heart:before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
:before 和 :after 必须配合content来使用,这个属性通常用来给元素添加内容诸如图片或者文字.当:before 和 :after伪类用来添加某些形状而不是图片或文字是,content实行依旧是必须的,但是它的值可以值空字符串.
在上面的例子当中,class 为 heart元素的:before 伪类添加了一个黄色的长方形,长方形的 height 和 width 分别为50px 和70px .由于设置了其边框半径为25%,所以长方形为圆角长方形,与其相对位置为距离left 5px ,以及向top偏移50px.
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform :rotate(-45deg);
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
content:'' ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
在这里我们已经实现了画心的需要,剩下的就是给设置心动的动画效果.
首先简单的复习一下和动画有关的知识点.
如果要给元素添加动画,我们需要了解animation 属性以及 @keyframes 规则.animation属性用于控制动画的外观,@keyframes 规则控制动画中各个阶段的变化.总共有8个animation 属性.
| 属性 | 意义 | |
| animation-name | 设置动画名称 | |
| animation-duration | 动画执行所花费的时间(可以是小数,但必须是正数),例animation-duration:1s; | |
| animation-delay | 在页面打开之后,动画延迟多长时间开始执行,例,animation-delay : 3s; | |
| animation-timing-mode(运行结束的状态) | forwards | 动画结束后停在最后一帧 |
| backforwards | 动画结束后返回第一帧 | |
| animation-iterator-count | num(1,2,3....) | 动画运行的次数 |
| infinite | 动画一直循环往复运动 | |
| animation-direction(运行方向) | alternate | 正反交替运行 |
| reverse | 反向运行 | |
| alternate-revers | 先倒着播放再顺着播放 | |
| animation-play-state(播放状态) | running | 当前动画正在运行 |
| pause | 当前动画可以被停止 | |
| animation-timing-function(画在每一动画周期中执行的节奏) | ease | 慢-快-很慢 |
| linear | 匀速 | |
| ease-in | 先慢后快 | |
| ease-out | 先快后慢 | |
| ease-in-out | 慢-快-慢 | |
@keyframes 能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性，以百分比来规定改变的时间，或者通过关键词“from”和“to”，等价于 0% 和 100%。打个比方，CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果。下面举例说明 @keyframes 和动画属性的用法：
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
id 为 anim 的元素，代码设置 animation-name 为 colorful，设置 animation-duration 为 3 秒。然后把 @keyframes 引用到名为 colorful 的动画属性上。 colorful 在动画开始时（0%）设置颜色为蓝色，在动画结束时（100%）设置颜色为黄色。注意不是只有开始和结束的过渡可以设置，0% 到 100% 间的任意百分比你都可以设置。
心跳动画的每一秒包含两个部分。heart元素（包括:before和:after）使用transform属性改变其大小，背景div使用background属性改变其颜色。
心跳动画的每一秒包含两个部分,heart元素 (包括:before 和 :after) 使用transform属性改变其大小,背景 div 使用background-color属性改变其颜色.
设置每个盒子的样式:
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count:infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count:infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
animation-iteration-count:infinite;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
添加动画:
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
html部分:
<div class="back"></div>
<div class="heart"></div>
最终效果如下:
