首页 > 代码库 > HTML 页面加载动画效果
HTML 页面加载动画效果
浏览器：Chrome
<!doctype html><html><head> <title>CSS transform: CSS only loading spinners</title><style>/* 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);}} */</style><script> //simple script to rotate all spinners 45 degrees on each tick //this works differently from the css transforms, which is smooth var count = 0; function rotate() { var elem = document.getElementById(‘div1‘); var elem2 = document.getElementById(‘div2‘); var elem3 = document.getElementById(‘div3‘); var elem4 = document.getElementById(‘div4‘); var elem5 = document.getElementById(‘div5‘); var elem6 = 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);</script></head><body><h2>Bars:</h2><div id="div1"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div></div><div id="div2"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div></div><div id="div3"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div></div><h2 style="clear:both">Balls:</h2><div id="div4"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div></div><div id="div5"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div></div><div id="div6"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div></div></body>
参考：http://kilianvalkhof.com/uploads/spinners/
HTML 页面加载动画效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。