使用css3实现小菊花加载效果

时间：2020-12-11 22:00:20

使用css3实现小菊花加载效果

　　最常见的就是我们用到的加载动画。加载动画的效果处理的好，会给页面带来画龙点睛的作用，而使用户愿意去等待。而页面中最常用的做法是把动画做成gif格式，当做背景图或是img标签来引用，这种方式最简单，也不会有兼容性的问题。不过最近再捣鼓CSS，看到一些动画的效果，不管是简单也好，复杂也好，就是想尝试用代码来实现它，换一种思维方式，就算在项目中用到的可能性很小，自己多动手多写写总归不会有坏处。

　　CSS3新增了很多强大的功能，虽然会有兼容性的问题，但是阻挡不了我们去使用它的这些新特性。像一些简单的动画以前靠画图工具来实现，现在单纯用CSS也能非常简单的实现。下面的案例就是利用CSS加html如何实现菊花旋转的动画。

HTML代码如下：　

 <div class="wrapper">

      <div class="line1"></div>

      <div class="line2"></div>

      <div class="line3"></div>

      <div class="line4"></div>

      <div class="line5"></div>

      <div class="line6"></div>

      <div class="line7"></div>

      <div class="line8"></div>

      <div class="line9"></div>

      <div class="line10"></div>

      <div class="line11"></div>

      <div class="line12"></div>

 </div>

CSS代码如下：

 @-webkit-keyframes loading {

   from {opacity:;width:5px;height:20px;}

   to {opacity: 0.25;width:5px;height:20px;}

 }

 .wrapper {

   position: relative;

   top:50%;

   left:50%;

   display: inline-block;

   zoom: 0.3; /*通过修改这个值(值的区间为0-1)的大小来设置菊花的大小*/

 }

 .wrapper div {

   width:3px;

   height:16px;

   background: #a4a2a4;

   position: absolute;

   left: 100%;

   top: 100%;

   opacity:;

   -webkit-animation: loading 1.2s linear infinite;

 }

 .wrapper .line1 {-webkit-transform:rotate(0deg) translate(0, -34px); -webkit-animation-delay: 0s;}

 .wrapper .line2 {-webkit-transform:rotate(30deg) translate(0, -34px); -webkit-animation-delay: 0.1s;}

 .wrapper .line3 {-webkit-transform:rotate(60deg) translate(0, -34px); -webkit-animation-delay: 0.2s;}

 .wrapper .line4 {-webkit-transform:rotate(90deg) translate(0, -34px); -webkit-animation-delay: 0.3s;}

 .wrapper .line5 {-webkit-transform:rotate(120deg) translate(0, -34px); -webkit-animation-delay: 0.4s;}

 .wrapper .line6 {-webkit-transform:rotate(150deg) translate(0, -34px); -webkit-animation-delay: 0.5s;}

 .wrapper .line7 {-webkit-transform:rotate(180deg) translate(0, -34px); -webkit-animation-delay: 0.6s;}

 .wrapper .line8 {-webkit-transform:rotate(210deg) translate(0, -34px); -webkit-animation-delay: 0.7s;}

 .wrapper .line9 {-webkit-transform:rotate(240deg) translate(0, -34px); -webkit-animation-delay: 0.8s;}

 .wrapper .line10 {-webkit-transform:rotate(270deg) translate(0, -34px); -webkit-animation-delay: 0.9s;}

 .wrapper .line11 {-webkit-transform:rotate(300deg) translate(0, -34px); -webkit-animation-delay: 1.0s;}

 .wrapper .line12 {-webkit-transform:rotate(330deg) translate(0, -34px); -webkit-animation-delay: 1.1s;}

相关文章