HTML:

<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>

CSS:

#div2 {
/* 核心CSS */
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}
@-webkit-keyframes rotateThis {
  from {-webkit-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);}
} 
/* position the bars and balls correctly (rotate them and translate them outward)*/
.bar1 {
  -moz-transform:rotate(0deg) translate(0, -40px);
  -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;
}
.bar2 {
  -moz-transform:rotate(45deg) translate(0, -40px);
  -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;
}
.bar3 {
  -moz-transform:rotate(90deg) translate(0, -40px);
  -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;
}
.bar4 {
  -moz-transform:rotate(135deg) translate(0, -40px);
  -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;
}
.bar5 {
  -moz-transform:rotate(180deg) translate(0, -40px);
  -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;
}
.bar6 {
  -moz-transform:rotate(225deg) translate(0, -40px);
  -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;
}
.bar7 {
  -moz-transform:rotate(270deg) translate(0, -40px);
  -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;
}
.bar8 {
  -moz-transform:rotate(315deg) translate(0, -40px);
  -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;
}

JS动画

 var count = 0;
  function rotate() {
    var elem2 = document.getElementById('div3');
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.setTimeout(rotate, 100);
  }
  window.setTimeout(rotate, 100);
" /> 辅助工具 · 任刚 · Ren Gang - 我的设计笔记

辅助工具    323

CSS3 Loading Spinners Without Images – 无须图片CSS旋转加载插件

插件      

Bouncy Animated Loading Animation - 纯CSS3加载动画 Loading插件

Bouncy Animated Loading Animation – 纯CSS3加载动画 Loading插件

插件      

Large Pressable CSS Button - 可按压的纯CSS立体3D按钮

Large Pressable CSS Button – 可按压的纯CSS立体3D按钮

插件      

Alexa - 网站排名、网站分析工具

Alexa – 网站排名、网站分析工具

工具      

Nivo Slider – 又一个jQuery图片轮播插件

工具      

站长工具 – 360搜索站长平台

工具      

MobiReady Report - 网页手机浏览兼容性检测

MobiReady Report – 网页手机浏览兼容性检测工具

工具      

IE NetRenderer - IE浏览器多版本截图工具

IE NetRenderer – IE浏览器多版本截图工具

工具      

Browsershots - 多浏览器网页截屏工具

Browsershots – 多浏览器网页截屏工具

工具      

WebSitePulse Test Tools - 网站加载速度及主机信息测试工具

WebSitePulse Test Tools – 网站加载速度及主机信息测试工具

工具      

Fancy 3D-Button - 超具立体感的CSS3 3D弹性按钮

Fancy 3D-Button – 超具立体感的CSS3 3D弹性按钮

工具      

CSS Buttons with Pseudo-Elements - CSS伪元素3D按钮

CSS Buttons with Pseudo-Elements – CSS伪元素3D按钮

工具      

登 录 注 册