<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css"> .container {
width: 960px;
margin: 0 auto;
overflow: hidden;
} /* Full Width Progress Bar */ #content {
width: 200px;
height: 5px;
margin: 50px auto;
background: #ccc;
border-radius:15px;
} .fullwidth .expand {
width: 200px;
height: 1px;
margin: 2px 0;
/*background: #2187e7;*/
background: #1463ad;
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;
} @-moz-keyframes fullexpand {
0% {
width: 0px;
} 100% {
width: 200px;
}
} @-webkit-keyframes fullexpand {
0% {
width: 0px;
} 100% {
width: 200px;
}
} /* Trigger button for javascript */ .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;
} .trigger:hover, .triggerFull:hover, .triggerBar:hover {
background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}
</style>
<script src="/js/jquery-1.8.3-min.js"></script>
<script> $(document).ready(function () {
//多久之后开始执行
var duration = 10; $('#content').removeClass('fullwidth');
$('.triggerFull').click(function () {
//清除使用了 finish() 方法之后的样式
$(".expand").removeAttr("style");
$('#content').removeClass('fullwidth').delay(duration).queue(function (next) {
$(this).addClass('fullwidth');
next();
});
return false;
});
}); function finish()
{
$(".fullwidth .expand").css({ "-moz-animation": "fullexpand 1s ease-out", "-webkit-animation": "fullexpand 1s ease-out" }); } </script>
</head>
<body>
<!-- FULL WIDTH -->
<div id="content">
<span class="expand"></span>
</div>
<a class="triggerFull" href="#">Start/Restart Animation</a>
<!-- END FULL WIDTH --> <input type="button" value="finish" onclick="finish()" /> </body>
</html>