標簽作為環形加載的線條。由于每根線條的透明度不同，所以講沒跟線條分為兩部分，即css文件中的.line div:和.line div:after，然后通過2d旋轉設置沒跟線條的旋轉角度頁面加載中的動態效果，使其圍繞成一個圓形，最后通過動畫設置其透明度變化。代碼實現：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>環形加載動畫title>
<style>
/*css document*/
* {
margin: 0;
padding: 0;
}
body {
background: #ffefce;
}
.cont {
width: 100px;
height: 100px;
position: relative;
margin: 100px auto;
}
.line div {
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100px;
}
.line div:before, .line div:after {
content: '';
display: block;
height: 50%;
background: #009cda;
border-radius: 5px;
}
/*設置組成環形加載的豎條的旋轉角度*/
.line div:nth-child(2) {
transform: rotate(15deg);
}
.line div:nth-child(3) {
transform: rotate(30deg);
}
.line div:nth-child(4) {
transform: rotate(45deg);
}
.line div:nth-child(5) {
transform: rotate(60deg);
}
.line div:nth-child(6) {
transform: rotate(75deg);
}
.line div:nth-child(7) {
transform: rotate(90deg);
}
.line div:nth-child(8) {
transform: rotate(105deg);
}
.line div:nth-child(9) {
transform: rotate(120deg);
}
.line div:nth-child(10) {
transform: rotate(135deg);
}
.line div:nth-child(11) {
transform: rotate(150deg);
}
.line div:nth-child(12) {
transform: rotate(165deg);
}
.circle {
position: absolute;
left: -15%;
top: 35%;
width: 50px;
height: 50px;
margin: -9px 0 0 -9px;
background: #ffefce;
border-radius: 100%;
}
/*定義動畫*/
@keyframes load {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*設置動畫以及動畫延遲 */
.line div:nth-child(1):before {
animation: load 1.2s linear 0s infinite;
}
/*依次從第一個div的:before至最后一個div的:before的動畫延遲為每個增加0.05s,此處省略雷同代碼*/
.line div:nth-child(2):before {
animation: load 1.2s linear 0.05s infinite;
}
.line div:nth-child(3):before {
animation: load 1.2s linear 0.1s infinite;
}
.line div:nth-child(4):before {
animation: load 1.2s linear 0.15s infinite;
}
.line div:nth-child(5):before {
animation: load 1.2s linear 0.2s infinite;
}
.line div:nth-child(6):before {
animation: load 1.2s linear 0.25s infinite;
}
.line div:nth-child(7):before {
animation: load 1.2s linear 0.3s infinite;
}
.line div:nth-child(8):before {
animation: load 1.2s linear 0.35s infinite;
}
.line div:nth-child(9):before {
animation: load 1.2s linear 0.4s infinite;
}
.line div:nth-child(10):before {
animation: load 1.2s linear 0.45s infinite;
}
.line div:nth-child(11):before {
animation: load 1.2s linear 0.5s infinite;
}
.line div:nth-child(12):before {
animation: load 1.2s linear 0.55s infinite;
}
.line div:nth-child(1):after {
animation: load 1.2s linear 0.6s infinite;
}
/*依次從第一個div的:after至最后一個div的:after的動畫延遲為每個增加0.05s,此處省略雷同代碼*/
.line div:nth-child(2):after {
animation: load 1.2s linear 0.65s infinite;
}
.line div:nth-child(3):after {
animation: load 1.2s linear 0.7s infinite;
}
.line div:nth-child(4):after {
animation: load 1.2s linear 0.75s infinite;
}
.line div:nth-child(5):after {
animation: load 1.2s linear 0.8s infinite;
}
.line div:nth-child(6):after {
animation: load 1.2s linear 0.85s infinite;
}
.line div:nth-child(7):after {
animation: load 1.2s linear 0.9s infinite;
}
.line div:nth-child(8):after {
animation: load 1.2s linear 0.95s infinite;
}
.line div:nth-child(9):after {
animation: load 1.2s linear 1.0s infinite;
}
.line div:nth-child(10):after {
animation: load 1.2s linear 1.05s infinite;
}
.line div:nth-child(11):after {
animation: load 1.2s linear 1.1s infinite;
}
.line div:nth-child(12):after {
animation: load 1.2s linear 1.15s infinite;
}
style>
head>
<body>
<div class="cont">
<div class="line">
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
div>
<div class="circle">div>
div>
body>
html>
十六、制作斑馬線樣式的進度條
1、實例描述：本實例實現的是斑馬線樣式進度條，打開本實例。可看到黃色的斑紋逐漸填充圓角矩形，如下圖所示，當圓角矩形被黃色斑紋完全填充時，表示網頁加載完成。
2、技術要點：本實例的關鍵在于設置滾動條中的波浪特效，實現該特效時，通過css3中的背景圖片-image屬性實現其波浪圖片頁面加載中的動態效果，然后在動畫中改變其背景以實現移動的波浪特效進度條。代碼實現：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作斑馬線樣式的進度條title>
<style>
.anim {
position: absolute;
top: 0;
left: -100px;
width: 480px;
height: 30px;
background-size: 30px 30px;
/*添加條紋背景*/
background-image: linear-gradient(-45deg, transparent 15px, transparent 8px, #ffe45c 9px, #ffe45c 20px, transparent 21px, transparent 36px, #ffe45c 37px);
animation: load 5s 1 linear forwards;
}
.cont {
width: 480px;
height: 30px;
position: relative;
background-color: #ee6666;
border-radius: 5px;
overflow: hidden;
}
@keyframes load {
0% {
width: 0; }
100% {
width: 680px; }
}
style>
head>
<body>
<div class="cont">
<div class="anim">div>
div>
body>
html>
十七、程序加載頁面
1、實例描述：在進入一些游戲網站的時候，通常會先進入一個程序加載頁面，等待幾秒鐘后才能進入程序。本實例將制作一個程序加載的頁面，運行結果如下圖所示：
2、技術要點：本實例主要是用
標記的屬性將文本框按照指定的順序添加到pimg層中，并通過修改層的style樣式的left屬性值，使層在頁面中不斷的移動。
代碼實現：
<html>
<head>
<title>程序加載頁面title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
head>
<body style="background:black">
<div id="div1" style="position:absolute;width:322px;height:14px;border:1px #707888 solid;overflow:hidden">
<div style="position:absolute;top:-1px;left:0" id="pimg">
div>
div>
<div id="div2" style="position:absolute;top:30px;left:120px;font-size:9pt;color:#f4f4f4">
正在加載中......
div>
<script type="text/javascript">
s=new Array("#050626","#0a0b44","#0f1165","#1a1d95","#1c1fa7","#1c20c8","#060cff");
//s=new Array("#333333","#555555","#777777","#999999","#AAAAAA","#CCCCCC","#EEEEEE");
div1.style.top=Math.floor((document.body.clientHeight-14)/2)+"px";
div1.style.left=Math.floor((document.body.clientWidth-322)/2)+"px";
div2.style.top=parseInt(div1.offsetTop)+20+"px";
div2.style.left=parseInt(div1.offsetLeft)+120+"px";
function Larrange(){
pimg.innerHTML="";
for(i=0;i<9;i++){
pimg.innerHTML+="+s[i]+";margin:1\">";
}
}
function Rarrange(){
pimg.innerHTML="";
for(i=9;i>-1;i--){
pimg.innerHTML+="+s[i]+";margin:1\">";
}
}
var is=0;size=0;
function move(){
if(pimg.offsetLeft<350&&is==0){
if(size==0){
Larrange();size=1;}
pimg.style.left=pimg.offsetLeft+3+"px";
setTimeout("move()",1);
return;
}
is=1;
if(pimg.offsetLeft>-200&&is==1){
if(size==1){
Rarrange();size=0;}
pimg.style.left=pimg.offsetLeft-3+"px";
setTimeout("move()",1);
return;
}
is=0;
move();
}
function flashs(){
if(div2.style.color=="#ffffff"){
div2.style.color="#707888";
setTimeout('flashs()',500);
}
else{
div2.style.color="#ffffff";
setTimeout('flashs()',500);
}
}
Larrange();
flashs();
move();
script>
body>
html>