当前位置 博文首页 > 大司空°的博客：css动画 心潮澎湃
话不多说，先上案例
如何在网页中实现这样一个动画呢？声明一下这可不是在网页中插入一个gif图,你所需要准备的只需要一张图片。
原理：如果你学过pr或者AE就会很容易了解到要将一张图片做成动画效果只需要用到两个东西：缩放和关键帧，即让一张图片在一段时间内不停地进行大小变化，从而达到“跳动”效果。
这里我们首先进行布局，将图片导入盒子
<body>
<div></div>
</body>
<style type="text/css">
div{
margin: 100px 0 0 650px;
width:500px;
height: 500px;
background: url(heart.png) no-repeat;
background-size: 100% 100%;
}
</style>
而后，对图片设计关键帧，这里我使用 @keyframes
@keyframes heart{
0%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1);
}
}
可以看到我设置了三个关键帧，分钟在动画开始（0%），中间（50%），以及结束（100%），同时通过 transform：scale() 控制图片比例。这里将动画命名为heart
将动画命名后，就可以在样式内加入动画animation啦。
animation: heart 500ms infinite;
这里是意思是执行名为heart的动画，持续时间为500ms，永远重复。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>心脏跳动</title>
<style type="text/css">
div{
margin: 100px 0 0 650px;
width:500px;
height: 500px;
background: url(heart.png) no-repeat;
background-size: 100% 100%;
animation: heart 500ms infinite;
}
@keyframes heart{
0%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
图片自行搜集哦。
以上，随手点赞好习惯，如果觉得有用不妨点个赞再走吧！
cs