HTML5动画实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CarAnimation</title>
<style>
html, body { margin:0; padding:0; }
.box { position:absolute; width:100%; height:100%; background:black; overflow:hidden; }
.car, .car .front, .car .back { background-image: url("data:image/jpg;base64,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"); background-repeat:no-repeat; }
.car {
-webkit-transform:translate(100px, 300px);
width:511px;
height:145px;
background-position:-49px -103px;
-webkit-animation-name:'carmove'; /* 设置引用动画 */
-webkit-animation-iteration-count:infinite; /* 设置执行次数为无穷 */
-webkit-animation-timing-function:ease; /* 设置时间变化函数为逐渐变换 */
-webkit-animation-direction:alternate; /* 设置动画结束后再反向执行 */
}
.car .front, .car .back { position:absolute; width:66px; height:66px; border-radius:33px; }
.car .front { left:51px; top:72px; background-position:-100px -175px; }
.car .back { left:379px; top:80px; background-position:-428px -183px; }
.car .front, .car .back { -webkit-animation:alternate infinite 'wheelmove'; } @-webkit-keyframes carmove {
0% {
-webkit-transform:translate(100px, 300px);
} 100% {
-webkit-transform:translate(800px, 300px);
}
} @-webkit-keyframes wheelmove {
0% {
-webkit-transform:rotateZ(0deg);
} 100% {
-webkit-transform:rotateZ(360deg);
}
}
</style>
<script>
window.onload = function () {
var oCar = document.querySelectorAll('.car')[0], // 车对象
oBack = oCar.querySelectorAll('.back')[0], // 后轮对象
oFront = oCar.querySelectorAll('.front')[0], // 前轮对象
iDuartion = 5000, // 动画总时长
iDelay = 3000, // 动画延时
timer = null; // 定时器 play(iDuartion, iDelay); // 执行动画 // 动画结束后暂停动画函数及清除定时器
timer = setTimeout(function () {
pause(); // 暂停动画
clearTimeout(timer); // 清除定时器
alert('动画结束');
}, iDelay + iDuartion); function pause() {
oCar.style.WebkitAnimationPlayState = 'paused'; // 暂停车动画
oBack.style.WebkitAnimationPlayState = 'paused'; // 暂停后轮动画
oFront.style.WebkitAnimationPlayState = 'paused'; // 暂停前轮动画
} function play(duration, delay) {
oCar.style.WebkitAnimationDuration = duration + 'ms'; // 设置车动画时长
oBack.style.WebkitAnimationDuration = duration + 'ms'; // 设置后轮动画时长
oFront.style.WebkitAnimationDuration = duration + 'ms'; // 设置前轮动画时长
oCar.style.WebkitAnimationDelay = delay + 'ms'; // 设置车动画延时
oBack.style.WebkitAnimationDelay = delay + 'ms'; // 设置后轮动画延时
oFront.style.WebkitAnimationDelay = delay + 'ms'; // 设置前轮动画延时
}
};
</script>
</head> <body>
<div class="box">
<div class="car">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</body>
</html>
上一篇:Excel设置数据有效性实现单元格下拉菜单的3种方法(转)


下一篇:OpenGL Compute Shader靠谱例子及读取二进制Shader,SPIR-V