CSS3 animation小动画
Posted jerry_wang24
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 animation小动画相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> *{ padding: 0; margin: 0; } .btn{ width: 200px; text-align: center; } .test{ width: 90px; height: 60px; background: url(img/test.png) no-repeat; margin: 60px; /*-webkit-animation: run 350ms steps(1) infinite 0s;*/ -webkit-animation: run 350ms steps(5) infinite 0s; } /*@-webkit-keyframes run{ 0%{ background-position: 0; } 20%{ background-position: -90px 0; } 40%{ background-position: -180px 0; } 60%{ background-position: -270px 0; } 80%{ background-position: -360px 0; } 100%{ background-position: -450px 0; } }*/ @-webkit-keyframes run{ 100%{ background-position: -450px 0; } } </style> <script> var speed =350; var flag = true; function fast(){ var obj = document.getElementById(\'flash\'); speed-=10; // console.log(obj.style.webkitAnimation) //为何获取不到？？？？？？ obj.style.webkitAnimation = " run "+speed+"ms steps(5) infinite 0s" } function slow(){ var obj = document.getElementById(\'flash\'); speed+=10; // console.log(obj.style.webkitAnimation) //为何获取不到？？？？？？ obj.style.webkitAnimation = " run "+speed+"ms steps(5) infinite 0s" } function play(){ var obj = document.getElementById(\'flash\'); flag = !flag; obj.style.webkitAnimationPlayState = flag ? "running" : "paused"; } </script> </head> <body> <div id=\'flash\' class="test"></div> <div class="btn"><button onclick="fast()">跑快点</button> <button onclick="slow()">跑慢点</button> <button onclick="play()">暂停/开始</button></div> </body> </html>
效果图
以上是关于CSS3 animation小动画的主要内容，如果未能解决你的问题，请参考以下文章