520那天看到@果冻的css爱心的文章，突然发现程序员还是很浪漫的。
看着满屏的红心，就想到真实的跳动的心脏，css是不是可以让这红心跳动起来呢。有想法那就开始coding
心形的实现
要让心跳动起来，先得有个心形，先大概说下心形的实现：心形是使用了元素的伪类 :before 和 : after，元素 position 属性设置为 relative，伪类 position 属性设置为 absolute，将其定位到元素的两个边框位置，再通过 transform 的 将整体逆时针转动45度。一个心形结构就出来了
心形css代码
div { height: 100px; width: 100px; background-color: red; position: relative; margin-top: 200px; margin-left: 200px; transform: rotate(-45deg); }
div::after,div::before { content: ""; height: 100px; width: 100px; position: absolute; border-radius: 50%; background-color: red; top: -50px; }
div::after { top: 0; left: 50px; }
心形html代码
<div></div>心形图片展示
红心跳动的实现
心形的跳动主要使用的是元素的 animation 属性和 @keyframes 创建我们的动画。
animation语法
animation: name duration timing-function delay iteration-count direction- animation-name 属性为 @keyframes 动画规定名称
- animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
默认值是 0，意味着没有动画效果。
- animation-timing-function 规定动画的速度曲线
值 描述 linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 - animation-delay 属性定义动画何时开始，可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。
- animation-iteration-count 属性定义动画的播放次数
值 描述 n 定义动画播放次数的数值。 infinite 规定动画应该无限次播放。 - animation-direction 属性定义是否应该轮流反向播放动画。
值 描述 normal 默认值。动画应该正常播放。 alternate 动画应该轮流反向播放。
@keyframes创建动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
实例如下：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}红心跳完整代码
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>test node</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <style> div { height: 100px; width: 100px; background-color: red; position: relative; margin-top: 200px; margin-left: 200px; transform: rotate(-45deg); animation: my 4s infinite; } div::after,div::before { content: ""; height: 100px; width: 100px; position: absolute; border-radius: 50%; background-color: red; top: -50px; } div::after { top: 0; left: 50px; animation: af 4s infinite; } div::before { animation: be 4s infinite; } @keyframes my { 0% { width: 50px; height: 50px; background-color: rgba(181,176,115,1); } 10% { width: 160px; height: 160px; background-color: rgba(226,81,25,1); } 30% { width: 60px; height: 60px; background-color: rgba(236,62,86,1); } 50% { width: 120px; height: 120px; background-color: rgba(223, 37, 61, 1); } 70% { width: 80px; height: 80px; background-color: rgb(238, 12, 42); } 100% { width: 100px; height: 100px; background-color: red; } } @keyframes be { 0% { width: 50px; height: 50px; top: -25px; background-color: rgba(181,176,115,1); } 10% { width: 160px; height: 160px; top: -80px; background-color: rgba(226,81,25,1); } 30% { width: 60px; height: 60px; top: -30px; background-color: rgba(236,62,86,1); } 50% { width: 120px; height: 120px; top: -60px; background-color: rgba(223, 37, 61, 1); } 70% { width: 80px; height: 80px; top: -40px; background-color: rgb(238, 12, 42); } 100% { width: 100px; height: 100px; top: -50px; background-color: red; } } @keyframes af { 0% { width: 50px; height: 50px; left: 25px; background-color: rgba(181,176,115,1); } 10% { width: 160px; height: 160px; left: 80px; background-color: rgba(226,81,25,1); } 30% { width: 60px; height: 60px; background-color: rgba(236,62,86,1); left: 30px; } 50% { width: 120px; height: 120px; left: 60px; background-color: rgba(223, 37, 61, 1); } 70% { width: 80px; height: 80px; left: 40px; background-color: rgb(238, 12, 42); } 100% { width: 100px; height: 100px; left: 50px; background-color: red; } } </style> </head> <body> <div></div> </body></html>总结：使用 @keyframes 创建动画，元素 animation 属性定义动画效果(第一次写文章，为了巩固所学，也分享给需要的朋友，有不足之处还望指正)
