CSS3制作ajax loader icon實現(xiàn)思路及代碼
發(fā)布時間：2013-08-25 13:17:04 作者：佚名 
我要評論
我要評論用到了兩個CSS3屬性transform、animation，實現(xiàn)原理為：transform控制每個小方塊在Y軸的偏移，rotate控制旋轉(zhuǎn)的角度，scale縮放至原大小的一半，具體祥看下文，希望對大家有所幫助
本文用到的兩個CSS3屬性：transform、animation
一、HTML
<div class="ajax-loading">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
</div>
二、CSS
.ajax-loading {
position: relative;
width: 100px;
height: 100px;
margin: 25px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation: rotateThis 1s infinite step-start;
animation: rotateThis 1s infinite step-start;
}
.ajax-loading div {
position: absolute;
top: 35px;
left: 45px;
width: 10px;
height: 30px;
background: #000;
}
.ajax-loading div.bar1 {
-webkit-transform: rotate(0deg) translate(0, -40px);
transform: rotate(0deg) translate(0, -40px);
opacity: 0.12;
}
.ajax-loading div.bar2 {
-webkit-transform: rotate(45deg) translate(0, -40px);
transform: rotate(45deg) translate(0, -40px);
opacity: 0.25;
}
.ajax-loading div.bar3 {
-webkit-transform: rotate(90deg) translate(0, -40px);
transform: rotate(90deg) translate(0, -40px);
opacity: 0.37;
}
.ajax-loading div.bar4 {
-webkit-transform: rotate(135deg) translate(0, -40px);
transform: rotate(135deg) translate(0, -40px);
opacity: 0.5;
}
.ajax-loading div.bar5 {
-webkit-transform: rotate(180deg) translate(0, -40px);
transform: rotate(180deg) translate(0, -40px);
opacity: 0.62;
}
.ajax-loading div.bar6 {
-webkit-transform: rotate(225deg) translate(0, -40px);
transform: rotate(225deg) translate(0, -40px);
opacity: 0.75;
}
.ajax-loading div.bar7 {
-webkit-transform: rotate(270deg) translate(0, -40px);
transform: rotate(270deg) translate(0, -40px);
opacity: 0.87;
}
.ajax-loading div.bar8 {
-webkit-transform: rotate(315deg) translate(0, -40px);
transform: rotate(315deg) translate(0, -40px);
opacity: 1;
}
@-webkit-keyframes rotateThis {
0% {-webkit-transform:scale(0.5) rotate(0deg);}
12.5% {-webkit-transform:scale(0.5) rotate(45deg);}
25% {-webkit-transform:scale(0.5) rotate(90deg);}
37.5% {-webkit-transform:scale(0.5) rotate(135deg);}
50% {-webkit-transform:scale(0.5) rotate(180deg);}
62.5% {-webkit-transform:scale(0.5) rotate(225deg);}
75% {-webkit-transform:scale(0.5) rotate(270deg);}
87.5% {-webkit-transform:scale(0.5) rotate(315deg);}
100% {-webkit-transform:scale(0.5) rotate(360deg);}
}
@keyframes rotateThis {
0% {transform:scale(0.5) rotate(0deg);}
12.5% {transform:scale(0.5) rotate(45deg);}
25% {transform:scale(0.5) rotate(90deg);}
37.5% {transform:scale(0.5) rotate(135deg);}
50% {transform:scale(0.5) rotate(180deg);}
62.5% {transform:scale(0.5) rotate(225deg);}
75% {transform:scale(0.5) rotate(270deg);}
87.5% {transform:scale(0.5) rotate(315deg);}
100% {transform:scale(0.5) rotate(360deg);}
}
三、思路
1. transform控制每個小方塊在Y軸的偏移，rotate控制旋轉(zhuǎn)的角度，scale縮放至原大小的一半；
2. opacity在每個小方塊之間相差0.12左右，達到漸變效果；
3. 設(shè)置top與left偏移，控制圓心在中心處；
4. 為整個方塊設(shè)置旋轉(zhuǎn)動畫rotateThis，定義8個時間點；
5. 設(shè)置動畫的animation-timing-function為step-start，達到的效果是不讓動畫漸變；
一、HTML
復制代碼
代碼如下:<div class="ajax-loading">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
</div>
二、CSS
復制代碼
代碼如下:.ajax-loading {
position: relative;
width: 100px;
height: 100px;
margin: 25px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation: rotateThis 1s infinite step-start;
animation: rotateThis 1s infinite step-start;
}
.ajax-loading div {
position: absolute;
top: 35px;
left: 45px;
width: 10px;
height: 30px;
background: #000;
}
.ajax-loading div.bar1 {
-webkit-transform: rotate(0deg) translate(0, -40px);
transform: rotate(0deg) translate(0, -40px);
opacity: 0.12;
}
.ajax-loading div.bar2 {
-webkit-transform: rotate(45deg) translate(0, -40px);
transform: rotate(45deg) translate(0, -40px);
opacity: 0.25;
}
.ajax-loading div.bar3 {
-webkit-transform: rotate(90deg) translate(0, -40px);
transform: rotate(90deg) translate(0, -40px);
opacity: 0.37;
}
.ajax-loading div.bar4 {
-webkit-transform: rotate(135deg) translate(0, -40px);
transform: rotate(135deg) translate(0, -40px);
opacity: 0.5;
}
.ajax-loading div.bar5 {
-webkit-transform: rotate(180deg) translate(0, -40px);
transform: rotate(180deg) translate(0, -40px);
opacity: 0.62;
}
.ajax-loading div.bar6 {
-webkit-transform: rotate(225deg) translate(0, -40px);
transform: rotate(225deg) translate(0, -40px);
opacity: 0.75;
}
.ajax-loading div.bar7 {
-webkit-transform: rotate(270deg) translate(0, -40px);
transform: rotate(270deg) translate(0, -40px);
opacity: 0.87;
}
.ajax-loading div.bar8 {
-webkit-transform: rotate(315deg) translate(0, -40px);
transform: rotate(315deg) translate(0, -40px);
opacity: 1;
}
@-webkit-keyframes rotateThis {
0% {-webkit-transform:scale(0.5) rotate(0deg);}
12.5% {-webkit-transform:scale(0.5) rotate(45deg);}
25% {-webkit-transform:scale(0.5) rotate(90deg);}
37.5% {-webkit-transform:scale(0.5) rotate(135deg);}
50% {-webkit-transform:scale(0.5) rotate(180deg);}
62.5% {-webkit-transform:scale(0.5) rotate(225deg);}
75% {-webkit-transform:scale(0.5) rotate(270deg);}
87.5% {-webkit-transform:scale(0.5) rotate(315deg);}
100% {-webkit-transform:scale(0.5) rotate(360deg);}
}
@keyframes rotateThis {
0% {transform:scale(0.5) rotate(0deg);}
12.5% {transform:scale(0.5) rotate(45deg);}
25% {transform:scale(0.5) rotate(90deg);}
37.5% {transform:scale(0.5) rotate(135deg);}
50% {transform:scale(0.5) rotate(180deg);}
62.5% {transform:scale(0.5) rotate(225deg);}
75% {transform:scale(0.5) rotate(270deg);}
87.5% {transform:scale(0.5) rotate(315deg);}
100% {transform:scale(0.5) rotate(360deg);}
}
三、思路
1. transform控制每個小方塊在Y軸的偏移，rotate控制旋轉(zhuǎn)的角度，scale縮放至原大小的一半；
2. opacity在每個小方塊之間相差0.12左右，達到漸變效果；
3. 設(shè)置top與left偏移，控制圓心在中心處；
4. 為整個方塊設(shè)置旋轉(zhuǎn)動畫rotateThis，定義8個時間點；
5. 設(shè)置動畫的animation-timing-function為step-start，達到的效果是不讓動畫漸變；
相關(guān)文章
css 命名：BEM, scoped css, css modules 與 css-in-js詳解
這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，,需要的朋友2020-08-24使用Loader.css和css-spinners來制作加載動畫的方法
這篇文章主要介紹了使用Loader.css和css-spinners來制作加載動畫的方法,基本上使用純CSS就可以實現(xiàn),簡單高效,需要的朋友可以參考下2016-04-05在vue-cli中使用css-loader實現(xiàn)css module
這篇文章主要介紹了在vue-cli中使用css-loader實現(xiàn)css module,本文給大家介紹的非常想詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-07