首页 > 代码库 > css3动画,制作跑步运动,画笔画圆,之类的连贯性动作的方法
css3动画,制作跑步运动,画笔画圆,之类的连贯性动作的方法
首先来看一下例子的效果图:
1.通过改变图片来实现,比较连贯,但是需要好多张图片来实现,增加了http请求,但是很好用,主要用到css3和animation。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!--<script src="http://www.mamicode.com/js/jquery.js"></script>--> <!--<script src="http://www.mamicode.com/js/index.js"></script>--> <style> .meishu{ width: 844px;height: 920px;animation: ani 1s;background-image:url("1/15.png");background-size: 100%; } @keyframes ani { 0%{ background-image:url("1/0.png"); } 7%{ background-image:url("1/1.png"); } 14%{ background-image:url("1/2.png"); } 21%{ background-image:url("1/3.png"); } 28%{ background-image:url("1/4.png"); } 35%{ background-image:url("1/5.png"); } 42%{ background-image:url("1/6.png"); } 49%{ background-image:url("1/7.png"); } 56%{ background-image:url("1/8.png"); } 63%{ background-image:url("1/9.png"); } 70%{ background-image:url("1/10.png"); } 77%{ background-image:url("1/11.png"); } 84%{ background-image:url("1/12.png"); } 91%{ background-image:url("1/13.png"); } 95%{ background-image:url("1/14.png"); } 100%{ background-image:url("1/15.png"); } } </style> </head> <body> <div class="meishu"></div> </body> </html>
2.通过把许多张图片放在一张图片上面,类似于图片精灵的方式,通过用background-position改变背景图片的位置,来实现。
把十几张图片合成一张
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!--<script src="http://www.mamicode.com/js/jquery.js"></script>--> <!--<script src="http://www.mamicode.com/js/index.js"></script>--> <style> .meishu{ width: 254px;height: 294px;animation: ani1 1s;background-image:url("1/circle.png");background-position:254px 0; } @keyframes ani1 { 0%{ background-position:254px 0; } 7%{ background-position:4049px 0; } 14%{ background-position:3795px 0; } 21%{ background-position:3541px 0; } 28%{ background-position:3287px 0; } 35%{ background-position:3033px 0; } 42%{ background-position:2779px 0; } 49%{ background-position:2525px 0; } 56%{ background-position:2271px 0; } 63%{ background-position:2017px 0; } 70%{ background-position:1763px 0; } 77%{ background-position:1509px 0; } 84%{ background-position:1255px 0; } 91%{ background-position:1001px 0; } 95%{ background-position:747px 0; } 100%{ background-position:493px 0; } } </style> </head> <body> <div class="meishu"></div> </body> </html>
这种方式我自己感觉不太好,接下来就该说用js了
3.用js实现,采用定时器的方法,变换图片。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://www.mamicode.com/js/jquery.js"></script> <script> window.onload=function(){ $(function(){ var num=0; setInterval(function(){ if(num<=15){ $(".meishu img").eq(num).show().siblings().hide(); num++; console.log(num); } },40) }) } </script> <style> .meishu{ width: 844px;height: 920px; } .meishu img{ position: absolute;top: 0;left: 0;display:none; } </style> </head> <body> <div class="meishu"> <img src="http://www.mamicode.com/1/0.png" > <img src="http://www.mamicode.com/1/1.png" > <img src="http://www.mamicode.com/1/2.png" > <img src="http://www.mamicode.com/1/3.png" > <img src="http://www.mamicode.com/1/4.png" > <img src="http://www.mamicode.com/1/5.png" > <img src="http://www.mamicode.com/1/6.png" > <img src="http://www.mamicode.com/1/7.png" > <img src="http://www.mamicode.com/1/8.png" > <img src="http://www.mamicode.com/1/9.png" > <img src="http://www.mamicode.com/1/10.png" > <img src="http://www.mamicode.com/1/11.png" > <img src="http://www.mamicode.com/1/12.png" > <img src="http://www.mamicode.com/1/13.png" > <img src="http://www.mamicode.com/1/14.png" > <img src="http://www.mamicode.com/1/15.png" > </div> </body> </html>
三种方式随意选都可以。
参考链接:http://www.cnblogs.com/PeunZhang/p/3685980.html
css3动画,制作跑步运动,画笔画圆,之类的连贯性动作的方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。