首页 > 代码库 > 使用css3实现小菊花加载效果
使用css3实现小菊花加载效果
使用css3实现小菊花加载效果
最常见的就是我们用到的加载动画。加载动画的效果处理的好，会给页面带来画龙点睛的作用，而使用户愿意去等待。而页面中最常用的做法是把动画做成gif格式，当做背景图或是img标签来引用，这种方式最简单，也不会有兼容性的问题。不过最近再捣鼓CSS，看到一些动画的效果，不管是简单也好，复杂也好，就是想尝试用代码来实现它，换一种思维方式，就算在项目中用到的可能性很小，自己多动手多写写总归不会有坏处。
CSS3新增了很多强大的功能，虽然会有兼容性的问题，但是阻挡不了我们去使用它的这些新特性。像一些简单的动画以前靠画图工具来实现，现在单纯用CSS也能非常简单的实现。下面的案例就是利用CSS加html如何实现菊花旋转的动画。
HTML代码如下：
1 <div class="wrapper"> 2 <div class="line1"></div> 3 <div class="line2"></div> 4 <div class="line3"></div> 5 <div class="line4"></div> 6 <div class="line5"></div> 7 <div class="line6"></div> 8 <div class="line7"></div> 9 <div class="line8"></div> 10 <div class="line9"></div> 11 <div class="line10"></div> 12 <div class="line11"></div> 13 <div class="line12"></div> 14 </div>
CSS代码如下：
1 @-webkit-keyframes loading { 2 from {opacity: 1;width:3px;height:20px;} 3 to {opacity: 0.25;width:3px;height:20px;} 4 } 5 div.wrapper { 6 position: absolute; 7 //top:50%; 8 left:50%; 9 display: inline-block; 10 zoom: 0.3; /*通过修改这个值(值的区间为0-1)的大小来设置菊花的大小*/ 11 } 12 div.wrapper div { 13 width:3px; 14 height:16px; 15 background: #a4a2a4; 16 position: absolute; 17 left: 100%; 18 top: 100%; 19 opacity: 0; 20 21 -webkit-animation: loading 1.2s linear infinite; 22 } 23 div.wrapper div.line1 {-webkit-transform:rotate(0deg) translate(0, -34px); -webkit-animation-delay: 0s;} 24 div.wrapper div.line2 {-webkit-transform:rotate(30deg) translate(0, -34px); -webkit-animation-delay: 0.1s;} 25 div.wrapper div.line3 {-webkit-transform:rotate(60deg) translate(0, -34px); -webkit-animation-delay: 0.2s;} 26 div.wrapper div.line4 {-webkit-transform:rotate(90deg) translate(0, -34px); -webkit-animation-delay: 0.3s;} 27 div.wrapper div.line5 {-webkit-transform:rotate(120deg) translate(0, -34px); -webkit-animation-delay: 0.4s;} 28 div.wrapper div.line6 {-webkit-transform:rotate(150deg) translate(0, -34px); -webkit-animation-delay: 0.5s;} 29 div.wrapper div.line7 {-webkit-transform:rotate(180deg) translate(0, -34px); -webkit-animation-delay: 0.6s;} 30 div.wrapper div.line8 {-webkit-transform:rotate(210deg) translate(0, -34px); -webkit-animation-delay: 0.7s;} 31 div.wrapper div.line9 {-webkit-transform:rotate(240deg) translate(0, -34px); -webkit-animation-delay: 0.8s;} 32 div.wrapper div.line10 {-webkit-transform:rotate(270deg) translate(0, -34px); -webkit-animation-delay: 0.9s;} 33 div.wrapper div.line11 {-webkit-transform:rotate(300deg) translate(0, -34px); -webkit-animation-delay: 1.0s;} 34 div.wrapper div.line12 {-webkit-transform:rotate(330deg) translate(0, -34px); -webkit-animation-delay: 1.1s;}
使用css3实现小菊花加载效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。