最近做了一个H5的小项目：包含一些动画特效 ，如 微风吹动的窗帘、持续闪烁的灯光、随风摆动的树枝、热气腾腾的一杯咖啡、原地摇摆的木马。。。
线上项目地址：https://m.50-jia.com/activity/h5_0615.html
那么来说一下实现的方式吧。首先一个原则能用css实现就不用js，能用小图的就绝不用大图，那么gif可以作为减少页面复杂程度和提高性能的选择方案。
开始吧：css实现原地摇摆的木马 ，
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title></title>
<script>document.documentElement.style.fontSize = document.documentElement.clientWidth /750 * 100 + 'px';</script>
<style type="text/css">
.hobbyhorse{
position: absolute;
top: .8rem;
left: 1.57rem;
width: 2.06rem;
height: 2.11rem;
/*background: url("https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/0614/images/3_hobbyhorse_03.png") no-repeat center;*/
/*-webkit-transform: translateX(-50%);*/
/*-ms-transform: translateX(-50%);*/
/*transform: translateX(-50%);*/
-webkit-animation: move 3s infinite;
animation: move 3s infinite;
}
@-webkit-keyframes move {
0% {
top: .8rem;
left: 1.52rem;
-webkit-transform: translate(-20%, 0) rotateZ(-10deg);
transform: translate(-20%, 0) rotateZ(-10deg);
}
50% {
top: .8rem;
left: 1.54rem;
-webkit-transform: translate(10%, 0) rotateZ(10deg);
transform: translate(10%, 0) rotateZ(10deg);
}
100% {
top: .8rem;
left: 1.52rem;
-webkit-transform: translate(-20%, 0) rotateZ(-10deg);
transform: translate(-20%, 0) rotateZ(-10deg);
}
}
@keyframes move {
0% {
top: .8rem;
left: 1.52rem;
-webkit-transform: translate(-20%, 0) rotateZ(-10deg);
transform: translate(-20%, 0) rotateZ(-10deg);
}
50% {
top: .8rem;
left: 1.54rem;
-webkit-transform: translate(10%, 0) rotateZ(10deg);
transform: translate(10%, 0) rotateZ(10deg);
}
100% {
top: .8rem;
left: 1.52rem;
-webkit-transform: translate(-20%, 0) rotateZ(-10deg);
transform: translate(-20%, 0) rotateZ(-10deg);
}
}
.hobbyhorse img{
width: 2.06rem;
height: 2.11rem;
}
</style>
</head>
<body>
<div class="hobbyhorse">
<img src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/0614/images/3_hobbyhorse_03.png"/>
</div>
</body>
效果
gif特效制作：
不断闪烁的灯光 https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/0614/images/4_led.gif
轻轻摇摆的窗帘 https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/0614/images/4_chuanglian1.gif
随风飘动的窗帘 https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/0614/images/222.gif
对，是的 制作成gif图片实现 。
百度教程 https://jingyan.baidu.com/article/8ebacdf007831349f65cd593.html
在线制作工具 http://www.nicetool.net/app/gif_maker.html