使用css3实现小菊花加载效果
2021-06-20 03:05
标签：web color gif block transform init 用户 pre mat 使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画。加载动画的效果处理的好，会给页面带来画龙点睛的作用，而使用户愿意去等待。而页面中最常用的做法是把动画做成gif格式，当做背景图或是img标签来引用，这种方式最简单，也不会有兼容性的问题。不过最近再捣鼓CSS，看到一些动画的效果，不管是简单也好，复杂也好，就是想尝试用代码来实现它，换一种思维方式，就算在项目中用到的可能性很小，自己多动手多写写总归不会有坏处。 CSS3新增了很多强大的功能，虽然会有兼容性的问题，但是阻挡不了我们去使用它的这些新特性。像一些简单的动画以前靠画图工具来实现，现在单纯用CSS也能非常简单的实现。下面的案例就是利用CSS加html如何实现菊花旋转的动画。 HTML代码如下： CSS代码如下： 使用css3实现小菊花加载效果 标签：web color gif block transform init 用户 pre mat 原文地址：http://www.cnblogs.com/zhangyuezhen/p/7146052.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>
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;}
上一篇：js获取复选框的value