这是一个无须图片的CSS3旋转加载动画插件,后附演示、代码、以及官方链接! P.S. CSS transform(Firefox 3.5+和基于Webkit的浏览器中可用)有很多有趣的功能,如旋转、平移、缩放和倾斜等等都可以用来设计加载动画。
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);
CSS3 Loading Spinners Without Images – 无须图片CSS旋转加载插件
https://www.rengang.com.cn/css3-loading-spinners-without-images.html
「真诚赞赏,手留余香」
赞助用于本站维护,手机长按识别二维码。
任刚(rengang.com.cn)整理分享,欣赏作品版权均归原作者所有,仅供学习交流。点击上方图标与好友分享!
发表回复
要发表评论,您必须先登录。