码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 loading动画实现思路

时间:2016-05-03 17:49:19      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

效果大致如下:

技术分享

主要实现方式:

该效果主要用到animation-timing-function中的steps()函数,该函数主要用于分步隐藏不同模块。

实现思路:

第一步动画:

技术分享

第二步动画:

技术分享

第三步动画:

技术分享

第四步动画:

技术分享

旋转半圆:

技术分享

将gif动画分解为四步实现,每一步都是由旋转半圆旋转实现动画效果,再通过steps函数分步隐藏不同模块实现整个连贯动画。

 

全部代码:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <title></title>
 5 <meta charset=UTF-8 />
 6 <style>
 7 .wrap {
 8     width: 64px;
 9     height: 64px;
10     position: relative;
11 }
12 .inner, .inner2 {
13     position: absolute;
14     width: 38px;
15     height: 38px;
16     border-radius: 40px;
17     overflow: hidden;
18     left: 13px;
19     top: 13px;
20 }
21 .inner { opacity: 1; background-color: #89abdd; 
22     animation: second-half-hide 1.6s steps(1, end) infinite;
23 }
24 .inner2 { opacity: 0; background-color: #4b86db; 
25     animation: second-half-show 1.6s steps(1, end) infinite;
26 }
27 .spiner, .filler, .masker {
28     position: absolute;
29     width: 50%;
30     height: 100%;
31 }
32 .spiner {
33     border-radius: 40px 0 0 40px;
34     background-color: #4b86db;
35     transform-origin: right center;
36     animation: spin 800ms infinite linear; 
37     left: 0;
38     top: 0;
39 }
40 .filler {
41     border-radius: 0 40px 40px 0;
42     background-color: #4b86db;
43     animation: second-half-hide 800ms steps(1, end) infinite;
44     left: 50%;
45     top: 0;
46     opacity: 1;
47 }
48 .masker {
49     border-radius: 40px 0 0 40px; 
50     background-color: #89abdd;
51      animation: second-half-show 800ms steps(1, end) infinite; 
52      left: 0; top: 0; 
53      opacity: 0; 
54  }
55 
56 .inner2 .spiner, .inner2 .filler {
57     background-color: #89abdd;
58 }
59 .inner2 .masker {
60     background-color: #4b86db;
61 }
62 
63 /*旋转动画*/
64 @keyframes spin {
65   0%   { transform: rotate(360deg); }
66   100% { transform: rotate(0deg); }
67 }
68 /*分步显示动画*/
69 @keyframes second-half-hide {
70   0%        { opacity: 1; }
71   50%, 100% { opacity: 0; }
72 }
73 /*分步显示动画*/
74 @keyframes second-half-show {
75   0%        { opacity: 0; }
76   50%, 100% { opacity: 1; }
77 }
78 </style>
79 </head>
80 <body>
81 <body>
82 <div class="wrap">
83     <div class="inner">
84         <!-- 顶层旋转效果 -->
85         <div class="spiner"></div>
86         <!-- 右侧分步显示半圆 -->
87         <div class="filler"></div>
88         <!-- 左侧分步显示半圆 -->
89         <div class="masker"></div>
90     </div>
91     <div class="inner2">
92         <div class="spiner"></div>
93         <div class="filler"></div>
94         <div class="masker"></div>
95     </div>
96 </div>
97 </body>
98 </html>

 

 

参考文章:http://www.zhangxinxu.com/wordpress/2014/04/css3-pie-loading-waiting-animation/

http://www.tuicool.com/articles/neqMVr

 

animation-timing-function

CSS3 loading动画实现思路

标签:

原文地址:http://www.cnblogs.com/linx/p/5455669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!