html页面加载动画效果,HTML 页面加载动画效果

CSS transform: CSS only loading spinners

/*general styling*/body{width:450px;margin:18px auto;

}

/*position the bars and balls correctly (rotate them and translate them outward)*/.bar1{transform:rotate(0deg) translate(0, -40px);opacity:0.12;

}.bar2{transform:rotate(45deg) translate(0, -40px);opacity:0.25;

}.bar3{transform:rotate(90deg) translate(0, -40px);opacity:0.37;

}.bar4{transform:rotate(135deg) translate(0, -40px);opacity:0.50;

}.bar5{transform:rotate(180deg) translate(0, -40px);opacity:0.62;

}.bar6{transform:rotate(225deg) translate(0, -40px);opacity:0.75;

}.bar7{transform:rotate(270deg) translate(0, -40px);opacity:0.87;

}.bar8{transform:rotate(315deg) translate(0, -40px);opacity:1;

}

/*set up the three bar spinners*/#div1, #div2,#div3{position:relative;width:100px;height:100px;margin:25px;float:left;transform:scale(0.5);transform:scale(0.5);

/*not used right now:*/animation-name:rotateThis;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:linear;

}#div1 div,

#div2 div,

#div3 div{width:10px;height:30px;background:#000;position:absolute;top:35px;left:45px;

}

/*shadows for the first spinner*/#div1 div{box-shadow:black 0 0 4px}

/*rounded outer corners for the second*/#div2 div{border-top-left-radius:10px;border-top-right-radius:10px;

}

/*full rounded corners and partially hidden for the third*/#div3 div{border-radius:20px;border-radius:20px;

}#div3 .bar1,

#div3 .bar2,

#div3 .bar3{opacity:0;}

/*set up the three ball spinners*/#div4, #div5, #div6{position:relative;width:100px;height:100px;margin:25px;border-radius:100px;float:left;transform:scale(0.5);animation-name:rotateThis;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:linear;

}#div4 div,

#div5 div,

#div6 div{width:20px;height:20px;background:#000;border-radius:40px;position:absolute;left:40px;top:40px;

}

/*add a shadow to the first*/#div4 div{box-shadow:black 0 0 4px;

}

/*increase the balls in size*/#div5 .bar1{transform:rotate(0deg) translate(0, -40px) scale(0.1);opacity:0.12;}#div5 .bar2{transform:rotate(45deg) translate(0, -40px) scale(0.2);opacity:0.25;}#div5 .bar3{transform:rotate(90deg) translate(0, -40px) scale(0.4);opacity:0.37;}#div5 .bar4{transform:rotate(135deg) translate(0, -40px) scale(0.6);opacity:0.50;}#div5 .bar5{transform:rotate(180deg) translate(0, -40px) scale(0.8);opacity:0.62;}#div5 .bar6{transform:rotate(225deg) translate(0, -40px) scale(1);opacity:0.75;}#div5 .bar7{transform:rotate(270deg) translate(0, -40px) scale(1.2);opacity:0.87;}#div5 .bar8{transform:rotate(315deg) translate(0, -40px) scale(1.4);opacity:1;}

/*hide the last halve*/#div6 .bar1 ,

#div6 .bar2,

#div6 .bar3{opacity:0;}

/*uncomment this to use css animation in webkit browsers*/

/*@-webkit-keyframes rotateThis {

from {-webkit-transform:scale(0.5) rotate(0deg);}

to {-webkit-transform:scale(0.5) rotate(360deg);}

}*/

//simple script to rotate all spinners 45 degrees on each tick

//this works differently from the css transforms, which is smooth

varcount= 0;functionrotate() {varelem=document.getElementById(‘div1‘);varelem2=document.getElementById(‘div2‘);varelem3=document.getElementById(‘div3‘);varelem4=document.getElementById(‘div4‘);varelem5=document.getElementById(‘div5‘);varelem6=document.getElementById(‘div6‘);

elem.style.WebkitTransform= ‘scale(0.5) rotate(‘+count+‘deg)‘;

elem2.style.WebkitTransform= ‘scale(0.5) rotate(‘+count+‘deg)‘;

elem3.style.WebkitTransform= ‘scale(0.5) rotate(‘+count+‘deg)‘;

elem4.style.WebkitTransform= ‘scale(0.5) rotate(‘+count+‘deg)‘;

elem5.style.WebkitTransform= ‘scale(0.5) rotate(‘+count+‘deg)‘;

elem6.style.WebkitTransform= ‘scale(0.5) rotate(‘+count+‘deg)‘;if(count==360) { count= 0}

count+=45;

window.setTimeout(rotate,100);

}

window.setTimeout(rotate,100);

Bars: