<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body { background: #161616 url(pattern_40.gif) top left repeat; margin: 0; padding: 0; font: 12px normal Verdana, Arial, Helvetica, sans-serif; height: 100%; } #content { width:100%; height:10px; position:absolute; top:75%; margin:50px auto; background:#000; } /* 进度条样式 */ .fullwidth .expand { width:100%; height:10px; margin:2px 0; background:#2187e7; position:absolute; box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);/*进度条阴影*/ -moz-animation:fullexpand 10s ease-out; -webkit-animation:fullexpand 10s ease-out; } /* 进度条速度 */ @-webkit-keyframes fullexpand { 0% { width:0px;} 100%{ width:100%;} <!-- } --> /* 按钮 */ .trigger, .triggerFull, .triggerBar { background: #000000; background: -moz-linear-gradient(top, #161616 0%, #000000 100%); background: -webkit-linear-gradient(top, #161616 0%,#000000 100%); border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; font-family: Verdana, Geneva, sans-serif; font-size: 0.8em; text-decoration: none; text-transform: lowercase; text-align: center; color: #fff; padding: 10px; border-radius: 3px; <!-- // display: block; --> margin: 0 auto; width: 140px; position:absolute; top:500px; left:50%; } </style> <script src="jquery.js" type="text/javascript"></script> <script> $(document).ready(function() { $('.triggerFull').click(function() { $('#content').removeClass('fullwidth').delay(5).queue(function(next){ $(this).addClass('fullwidth'); next(); <!-- while(fullexpand.width==100%) --> <!-- window.location.href="http://news.qq.com"; --> }); // return false; }); }); </script> <link rel="canonical" href="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/index.html" /> </head> <body> <div class="container"> </div> <div id="content"> <span class="expand"></span> </div> <a class="triggerFull" href="#">Start/Restart Animation</a> </body> </html>
