HTML 页面加载动画效果

浏览器：Chrome, IE
<!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.transform = 'scale(0.5) rotate('+count+'deg)';

    elem2.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem3.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem4.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem5.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem6.style.transform = '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>

</html>
参考：http://kilianvalkhof.com/uploads/spinners/
巴特西

HTML 页面加载动画效果

最新文章

热门文章
