- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>CSS3载入中动画</title>
- <style type="text/css">
- ul#progress {
- list-style:none;
- width:125px;
- margin:0 auto;
- padding-top:50px;
- padding-bottom:50px;
- }
- ul#progress li { /* Style your list */
- float:left;
- position:relative;
- width:15px;
- height:15px;
- border:1px solid #fff;
- border-radius:50px;
- margin-left:10px;
- border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
- background:#000;
- }
- ul#progress li:first-child { margin-left:0; } /* Remove the margin first li element */
- .ball { /* Style your ball and set the animation */
- background-color:#2187e7;
- background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
- background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
- width:15px;
- height:15px;
- border-radius:50px;
- -moz-transform:scale(0);
- -webkit-transform:scale(0);
- -moz-animation:loading 1s linear forwards;
- -webkit-animation:loading 1s linear forwards;
- }
- .pulse { /* Style your second ball to create the amazing effects */
- width:15px;
- height:15px;
- border-radius:30px;
- border: 1px solid #00c6ff;
- box-shadow: 0 0 5px #00c6ff;
- position:absolute;
- top:-1px;
- left:-1px;
- -moz-transform:scale(0);
- -webkit-transform:scale(0);
- -webkit-animation:pulse 1s ease-out;
- -moz-animation:pulse 1s ease-out;
- }
- /* Control Layers */
- #layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
- #layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
- #layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
- #layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
- #layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
- #layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
- #layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
- #layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
- #layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
- #layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
- @-moz-keyframes loading {
- 0%{-moz-transform:scale(0,0);}
- 100%{-moz-transform:scale(1,1);}
- }
- @-webkit-keyframes loading {
- 0%{-webkit-transform:scale(0,0);}
- 100%{-webkit-transform:scale(1,1);}
- }
- @-moz-keyframes pulse {
- 0% {-moz-transform: scale(0);opacity: 0;}
- 10% {-moz-transform: scale(1);opacity: 0.5;}
- 50% {-moz-transform: scale(1.75);opacity: 0;}
- 100% {-moz-transform: scale(0);opacity: 0;}
- }
- @-webkit-keyframes pulse {
- 0% {-webkit-transform: scale(0);opacity: 0;}
- 10% {-webkit-transform: scale(1);opacity: 0.5;}
- 50% {-webkit-transform: scale(1.75);opacity: 0;}
- 100% {-webkit-transform: scale(0);opacity: 0;}
- }
- body{ background:#333;}
- /***************************************************************/
- #content {
- width:100%; /* Full Width */
- height:5px;
- margin:50px auto;
- background:#000;
- }
- .expand {
- width:100%;
- height:1px;
- 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;
- }
- /* Full Width Animation Bar */
- @-moz-keyframes fullexpand {
- 0% { width:0px;}
- 100%{ width:100%;}
- }
- @-webkit-keyframes fullexpand {
- 0% { width:0px;}
- 100%{ width:100%;}
- }
- /***********************************************************************/
- ul#loadbar {
- list-style:none;
- width:140px;
- margin:0 auto;
- padding-top:50px;
- padding-bottom:75px;
- }
- ul#loadbar li {
- float:left;
- position:relative;
- width:11px;
- height:26px;
- margin-left:1px;
- border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
- background:#000;
- }
- ul#loadbar li:first-child { margin-left:0; }
- .bar {
- background-color:#2187e7;
- background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
- background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
- width:11px;
- height:26px;
- opacity:0;
- -webkit-animation:fill .5s linear forwards;
- -moz-animation:fill .5s linear forwards;
- }
- #layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
- #layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
- #layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
- #layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
- #layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
- #layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
- #layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
- #layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
- #layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
- #layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }
- @-moz-keyframes fill {
- 0%{ opacity:0; }
- 100%{ opacity:1; }
- }
- @-webkit-keyframes fill {
- 0%{ opacity:0; }
- 100%{ opacity:1; }
- }
- </style>
- </head>
- <body>
- <ul id="progress">
- <li>
- <div id="layer1" class="ball"></div>
- <!-- layer1 control delay animation By:www.iiwnet.com / ball is effect -->
- <div id="layer7" class="pulse"></div>
- <!-- layer7 control delay animation / pulse is effect -->
- </li>
- <li>
- <div id="layer2" class="ball"></div>
- <div id="layer8" class="pulse"></div>
- </li>
- <li>
- <div id="layer3" class="ball"></div>
- <div id="layer9" class="pulse"></div>
- </li>
- <li>
- <div id="layer4" class="ball"></div>
- <div id="layer10" class="pulse"></div>
- </li>
- <li>
- <div id="layer5" class="ball"></div>
- <div id="layer11" class="pulse"></div>
- </li>
- </ul>
- <div id="content">
- <span class="expand"></span>
- </div>
- <p>更多>><a href='http://www.iiwnet.com' >JS特效</a> </p>
- <ul id="loadbar">
- <li>
- <div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar -->
- </li>
- <li>
- <div id="layerFill2" class="bar"></div>
- </li>
- <li>
- <div id="layerFill3" class="bar"></div>
- </li>
- <li>
- <div id="layerFill4" class="bar"></div>
- </li>
- <li>
- <div id="layerFill5" class="bar"></div>
- </li>
- <li>
- <div id="layerFill6" class="bar"></div>
- </li>
- <li>
- <div id="layerFill7" class="bar"></div>
- </li>
- <li>
- <div id="layerFill8" class="bar"></div>
- </li>
- <li>
- <div id="layerFill9" class="bar"></div>
- </li>
- <li>
- <div id="layerFill10" class="bar"></div>
- </li>
- </ul>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/130820135124.html
来源: http://www.codesnippet.cn/detail/130820135124.html