效果圖：
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5/CSS3奔跑动画DEMO演示 - 何问起</title><base target="_blank" /> <link href="http://hovertree.com/texiao/jquery/58/css.css" rel="stylesheet" type="text/css" /> <script src="http://hovertree.com/texiao/css/8/prefixfree.min.js"></script> </head> <body> <div class='kai animate' id='running'> <div class='eyes'></div> </div> <div class='slide'> <div class='stage'> <div class='foreground-trees'></div> <div class='landscape'></div> <div class='behind-trees'></div> <div class='behind-mountains'></div> </div> </div> <div class="infohovertree">生命在于运动，奔跑吧兄弟！ <br /> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/5f5eiagg.htm">原文</a> </div> <script type="text/javascript" src='http://down.hovertree.com/jquery/jquery-1.12.3.min.js'></script> <script type="text/javascript" src='http://hovertree.com/texiao/jquery/58/js/jquery.transform.js'></script> <script type="text/javascript" src="http://hovertree.com/texiao/jquery/58/js/index.js"></script> </body> </html>
以上是CSS3+JS實現人物奔跑動畫的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
