最近做了一个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
:
.8
rem;
left
:
1.57
rem;
width
:
2.06
rem;
height
:
2.11
rem;
/*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
3
s infinite
;
animation
:
move
3
s infinite;
}
@-webkit-keyframes
move
{
0% {
top:
.8
rem
;
left
:
1.52
rem;
-webkit-transform
:
translate
(-
20
%,
0
)
rotateZ
(-
10
deg
);
transform
:
translate
(-
20
%,
0
)
rotateZ
(-
10
deg
);
}
50% {
top:
.8
rem
;
left
:
1.54
rem;
-webkit-transform
:
translate
(
10
%,
0
)
rotateZ
(
10
deg
);
transform
:
translate
(
10
%,
0
)
rotateZ
(
10
deg
);
}
100% {
top:
.8
rem
;
left
:
1.52
rem;
-webkit-transform
:
translate
(-
20
%,
0
)
rotateZ
(-
10
deg
);
transform
:
translate
(-
20
%,
0
)
rotateZ
(-
10
deg
);
}
}
@keyframes move {
0% {
top:
.8
rem
;
left
:
1.52
rem;
-webkit-transform
:
translate
(-
20
%,
0
)
rotateZ
(-
10
deg
);
transform
:
translate
(-
20
%,
0
)
rotateZ
(-
10
deg
);
}
50% {
top:
.8
rem
;
left
:
1.54
rem;
-webkit-transform
:
translate
(
10
%,
0
)
rotateZ
(
10
deg
);
transform
:
translate
(
10
%,
0
)
rotateZ
(
10
deg
);
}
100% {
top:
.8
rem
;
left
:
1.52
rem;
-webkit-transform
:
translate
(-
20
%,
0
)
rotateZ
(-
10
deg
);
transform
:
translate
(-
20
%,
0
)
rotateZ
(-
10
deg
);
}
}
.
hobbyhorse
img{
width:
2.06
rem
;
height
:
2.11
rem;
}
</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