CSS3 之loading動畫實現思路

效果大致如下：

主要實現方式：

該效果主要用到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 
12.inner, .inner2 
21.inner 
24.inner2 
27.spiner, .filler, .masker 
32.spiner 
40.filler 
48.masker 
5556
.inner2 .spiner, .inner2 .filler 
59.inner2 .masker 
6263
/*旋轉動畫
*/64
@keyframes spin 
66100% 67}
68/*
分步顯示動畫
*/69
@keyframes second-half-hide 
7150%, 100% 72}
73/*
分步顯示動畫
*/74
@keyframes second-half-show 
7650%, 100% 77}
78style
>
79head
>
80<
body
>
81<
body
>
82<
div 
class
="wrap"
>
83<
div 
class
="inner"
>
8485
<
div 
class
="spiner"
>
div>
8687
<
div 
class
="filler"
>
div>
8889
<
div 
class
="masker"
>
div>
90div
>
91<
div 
class
="inner2"
>
92<
div 
class
="spiner"
>
div>
93<
div 
class
="filler"
>
div>
94<
div 
class
="masker"
>
div>
95div
>
96div
>
97body
>
98html
>

animation-timing-function

CSS3 實現 loading 動畫效果

由圍成乙個圈的一些小圓點，然後順時針方向，逐個半徑變小，再變大，也就是消失再出現的過程，每個點變小不是同時的，設定相同的時間差，就能形成載入中的視覺效果.首先，在乙個塊中繪製4個小圓點，為了明顯，先設定一下邊框，後面刪除即可 class circlebox p p p p div 然後讓其固定在螢幕...

css3實現簡易loading動畫

css3已經火的不行，我還很淡 dan 定 teng 地在啃著css2,表示很慚愧啊 週末抽點時間看了下loading效果的實現，開始看到css3有點頭大，感覺是不是向外面說的那樣每一次標準的發布都像是在學習一門新語言呢，稱有些惶恐。說完廢話了.開始show doctype html html la...

純css3 載入loading動畫特效

最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading，本來是想做個提示的，但是如果放大電腦的解析度就會感覺到很虛，體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果，最終在我們前端工程師的幫助之下完成。所以記錄在這裡，如果感興趣的朋友也可以看看，大家互相焦爐學...