十六種炫酷純css加載動(dòng)畫（一）

個(gè)好的開篇，會(huì)給你這個(gè)項(xiàng)目增加不少分值。

有沒有遇到過打開頁面加載一段時(shí)間，頁面內(nèi)容才加載出來。在等待加載的過程中頁面卻是空白頁，給用戶的體驗(yàn)特別不好，會(huì)讓項(xiàng)目降一個(gè)檔次。下面的十六種炫酷炸裂的css加載動(dòng)畫，會(huì)讓你在等待的過程中，體驗(yàn)視覺盛宴，給用戶不一般的加載體驗(yàn)，對(duì)，就是純css3的炫酷加載動(dòng)畫，請(qǐng)看效果！

碼字不易，且行且珍惜。

加載1

css源碼

.title{
 width: 100%;
 text-align: center;
 margin:60px 0;
 font-size: 18px;
 color: #999;
}
.loadingOne{
 width: 80px;
 height: 40px;
 margin: 0 auto;
}
.loadingOne span{
 display: inline-block;
 width: 8px;
 height: 100%;
 border-radius: 4px;
 background: lightgreen;
 -webkit-animation: load 1s ease infinite;
 animation: load 1s ease infinite;
}
@-webkit-keyframes load{
 0%,100%{
 height: 40px;
 background: lightgreen;
 }
 50%{
 height: 70px;
 margin: -15px 0;
 background: lightblue;
 }
}
.loadingOne span:nth-child(2){
 -webkit-animation-delay:0.2s;
 animation-delay:0.2s;
}
.loadingOne span:nth-child(3){
 -webkit-animation-delay:0.4s;
 animation-delay:0.4s;
}
.loadingOne span:nth-child(4){
 -webkit-animation-delay:0.6s;
 animation-delay:0.6s;
}
.loadingOne span:nth-child(5){
 -webkit-animation-delay:0.8s;
 animation-delay:0.8s;
}

html源碼

<div class="loadingOne">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<p class="title">[加載1]</p>

加載2

css源碼

.loadingTwo{
 width: 150px;
 height: 4px;
 border-radius: 2px;
 margin: 0 auto;
 margin-top:100px;
 position: relative;
 background: lightgreen;
 -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
 animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
 display: inline-block;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: lightgreen;
 position: absolute;
 margin-top: -7px;
 margin-left:-8px;
 -webkit-animation: changePosition 1.04s ease-in infinite alternate;
 animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
 0%{
 background: lightgreen;
 }
 100%{
 background: lightblue;
 }
}
@-webkit-keyframes changePosition{
 0%{
 background: lightgreen;
 }
 100%{
 margin-left: 142px;
 background: lightblue;
 }
}

html源碼

<div class="loadingTwo">
 <span></span>
</div>

加載3

css源碼

.loadingThree{
 width: 150px;
 height: 15px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingThree span{
 display: inline-block;
 width: 15px;
 height: 100%;
 margin-right: 5px;
 border-radius: 50%;
 background: lightgreen;
 -webkit-animation: load 1.04s ease infinite;
}
.loadingThree span:last-child{
 margin-right: 0px;
}
@-webkit-keyframes load{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
}
.loadingThree span:nth-child(1){
 -webkit-animation-delay:0.13s;
}
.loadingThree span:nth-child(2){
 -webkit-animation-delay:0.26s;
}
.loadingThree span:nth-child(3){
 -webkit-animation-delay:0.39s;
}
.loadingThree span:nth-child(4){
 -webkit-animation-delay:0.52s;
}
.loadingThree span:nth-child(5){
 -webkit-animation-delay:0.65s;
}

html源碼

<div class="loadingThree">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加載4

css源碼

.loadingFour{
 width: 150px;
 height: 15px;
 margin: 0 auto;
 margin-top:100px;
 text-align: center;
 }
 .loadingFour span{
 display: inline-block;
 width: 15px;
 height: 100%;
 margin-right: 5px;
 background: lightgreen;
 -webkit-animation: load 1.04s ease infinite;
 }
 .loadingFour span:last-child{
 margin-right: 0px;
 }
 @-webkit-keyframes load{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
 }
 .loadingFour span:nth-child(1){
 -webkit-animation-delay:0.13s;
 }
 .loadingFour span:nth-child(2){
 -webkit-animation-delay:0.26s;
 }
 .loadingFour span:nth-child(3){
 -webkit-animation-delay:0.39s;
 }
 .loadingFour span:nth-child(4){
 -webkit-animation-delay:0.52s;
 }
 .loadingFour span:nth-child(5){
 -webkit-animation-delay:0.65s;
 }.loadingTwo{
 width: 150px;
 height: 4px;
 border-radius: 2px;
 margin: 0 auto;
 margin-top:100px;
 position: relative;
 background: lightgreen;
 -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
 animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
 display: inline-block;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: lightgreen;
 position: absolute;
 margin-top: -7px;
 margin-left:-8px;
 -webkit-animation: changePosition 1.04s ease-in infinite alternate;
 animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
 0%{
 background: lightgreen;
 }
 100%{
 background: lightblue;
 }
}
@-webkit-keyframes changePosition{
 0%{
 background: lightgreen;
 }
 100%{
 margin-left: 142px;
 background: lightblue;
 }
}

html源碼

<div class="loadingFour">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加載5

css源碼

.loadingFive{
 width: 150px;
 height: 15px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingFive span{
 display: inline-block;
 width: 15px;
 height: 100%;
 margin-right: 5px;
 background: lightgreen;
 -webkit-transform-origin: right bottom;
 -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
 margin-right: 0px;
}
@-webkit-keyframes load{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 -webkit-transform: rotate(90deg);
 }
}
.loadingFive span:nth-child(1){
 -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
 -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
 -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
 -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
 -webkit-animation-delay:0.65s;
}.loadingTwo{
 width: 150px;
 height: 4px;
 border-radius: 2px;
 margin: 0 auto;
 margin-top:100px;
 position: relative;
 background: lightgreen;
 -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
 animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
 display: inline-block;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: lightgreen;
 position: absolute;
 margin-top: -7px;
 margin-left:-8px;
 -webkit-animation: changePosition 1.04s ease-in infinite alternate;
 animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
 0%{
 background: lightgreen;
 }
 100%{
 background: lightblue;
 }
}
@-webkit-keyframes changePosition{
 0%{
 background: lightgreen;
 }
 100%{
 margin-left: 142px;
 background: lightblue;
 }
}.loadingFive{
 width: 150px;
 height: 15px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingFive span{
 display: inline-block;
 width: 15px;
 height: 100%;
 margin-right: 5px;
 background: lightgreen;
 -webkit-transform-origin: right bottom;
 -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
 margin-right: 0px;
}
@-webkit-keyframes load{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 -webkit-transform: rotate(90deg);
 }
}
.loadingFive span:nth-child(1){
 -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
 -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
 -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
 -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
 -webkit-animation-delay:0.65s;
}

html源碼

<div class="loadingSix">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加載6

css源碼

.loadingSeven{
 width: 80px;
 height: 40px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingSeven span{
 display: inline-block;
 width: 8px;
 height: 100%;
 border-radius: 4px;
 background: lightgreen;
 -webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{
 0%,100%{
 height: 40px;
 background: lightgreen;
 }
 50%{
 height: 60px;
 margin-top: -20px;
 background: lightblue;
 }
}
.loadingSeven span:nth-child(2){
 -webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){
 -webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){
 -webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){
 -webkit-animation-delay:0.52s;
}

html源碼

<div class="loadingSeven">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加載7

css源碼

.loadingSeven{
 width: 80px;
 height: 40px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingSeven span{
 display: inline-block;
 width: 8px;
 height: 100%;
 border-radius: 4px;
 background: lightgreen;
 -webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{
 0%,100%{
 height: 40px;
 background: lightgreen;
 }
 50%{
 height: 60px;
 margin-top: -20px;
 background: lightblue;
 }
}
.loadingSeven span:nth-child(2){
 -webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){
 -webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){
 -webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){
 -webkit-animation-delay:0.52s;
}

html源碼

<div class="loadingSeven">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加載8

css源碼

.loadingEight{
 width: 80px;
 height: 80px;
 border-radius: 50%;
 margin: 0 auto;
 margin-top:100px;
 position: relative;
 border:5px solid lightgreen;
 -webkit-animation: turn 2s linear infinite;
}
.loadingEight span{
 display: inline-block;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: lightgreen;
 position: absolute;
 left: 50%;
 margin-top: -15px;
 margin-left: -15px;
 -webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
 0%{
 background: lightgreen;
 }
 100%{
 background: lightblue;
 }
}
@-webkit-keyframes turn{
 0%{
 -webkit-transform: rotate(0deg);
 border-color: lightgreen;
 }
 100%{
 -webkit-transform: rotate(360deg);
 border-color: lightblue;
 }
}

html源碼

<div class="loadingEight">
 <span></span>
</div>

搬你想搬，蓋你所需，碼字不易，且行且珍惜！

用 HTML 和 CSS 制作 LOGO 動(dòng)畫要比以前更容易，通過使用最新的 JavaScript 庫也能夠使網(wǎng)頁動(dòng)畫制作的更加精良。

在本文中，我們將與大家分享 10 個(gè)讓人印象深刻的世界知名品牌與未知實(shí)體的自定義 LOGO 動(dòng)畫示例。一起來 Enjoy 吧！

1. Flowers SVG

SVG 動(dòng)畫作為網(wǎng)上最熱門的動(dòng)畫趨勢之一，備受大家的關(guān)注。而這個(gè)花的 LOGO 動(dòng)畫便是一個(gè)很好的 SVG 動(dòng)畫示例。

我們可以看到，此 LOGO 的圖標(biāo)和文字在<svg>標(biāo)簽內(nèi)編寫，通過 CSS 來控制動(dòng)畫，并可以自動(dòng)的完成頁面的加載。當(dāng)然，需要一些 SVG 特定的 CSS 屬性支持，例如stroke-dashoffset（譯者：表示虛線的起始偏移），它會(huì)按順序來推動(dòng)輪廓的運(yùn)動(dòng)，進(jìn)而實(shí)現(xiàn)了精美的動(dòng)畫效果。

項(xiàng)目地址：https://codepen.io/flwrs/pen/gLrygN

2. Carbon LDP

Carbon LDP 的 LOGO 動(dòng)畫相當(dāng)?shù)膹?fù)雜。但是開發(fā)者 David McFeders 通過 CSS/Compass 實(shí)現(xiàn)了 Carbon 的 LOGO 動(dòng)畫，從而也提升了它的逼格。

無論是 LOGO 的大小，還是動(dòng)畫的速度都很容易設(shè)置。它由純 CSS 實(shí)現(xiàn)，并保持著無限的循環(huán)。雖然，LOGO 的字母是一張 PNG 圖片，但你也可以隨時(shí)利用自己設(shè)計(jì)的字體進(jìn)行逆向工程。

項(xiàng)目地址：https://codepen.io/MiguelAraCo/pen/QbZqoQ

3. Binary Lab

Binary Lab 的 LOGO 動(dòng)畫同樣是本文中比較復(fù)雜的動(dòng)畫效果之一。我們可以看到它的效果：從燒瓶里拉出的數(shù)字，在 LOGO 的上方不斷的消失。

動(dòng)畫效果是由 CSS 控制的。同時(shí)，這個(gè)作品依賴了 TweenMax 庫來添加重復(fù)的數(shù)字，并完成自定義的 alpha 轉(zhuǎn)換。作者很有創(chuàng)意的利用 CSS 與 JS 實(shí)現(xiàn)了這個(gè)酷炫的 Web 動(dòng)畫效果。

項(xiàng)目地址：https://codepen.io/iconjunkie/pen/vLEaNZ

4. Pure CSS3 Stack Overflow

Stack Overflow 的 LOGO 是我最喜歡的 LOGO 之一，因?yàn)樗脑O(shè)計(jì)不僅簡單，而且易識(shí)別。而這個(gè)作品僅用 CSS3 將 Stack Overflow 的 LOGO 進(jìn)行了動(dòng)畫效果的實(shí)現(xiàn)。

這是迄今為止我看到的最令人印象深刻的純 CSS 動(dòng)畫之一。最終的展現(xiàn)也與官方的 LOGO 很搭，同時(shí)在主流瀏覽器中動(dòng)畫都可以流暢的運(yùn)行。相信，任何喜歡 CSS / SCSS 動(dòng)畫的朋友都會(huì)喜歡上這個(gè)作品。

項(xiàng)目地址：https://codepen.io/lindell/pen/mEVgJP

5. Monster Energy Logos

這個(gè)作品是由 Tim Pietrusky 利用 SVG 和均勻的 CSS 轉(zhuǎn)換實(shí)現(xiàn)的怪物能量 LOGO 系列動(dòng)畫。如果你也打算在 LOGO 上實(shí)現(xiàn)淡入淡出的特效，就可以復(fù)制他的代碼來學(xué)習(xí)。

它是一款純 CSS 實(shí)現(xiàn)的動(dòng)畫，所有的動(dòng)畫時(shí)間都是由 SCSS 直接進(jìn)行調(diào)控。同時(shí)，你也可以通過更改變量來調(diào)節(jié)動(dòng)畫的速度，淡化顏色。

項(xiàng)目地址：https://codepen.io/TimPietrusky/pen/vKuja

6. Subvisual

Subvisual 團(tuán)隊(duì)擁有非常獨(dú)特的 LOGO，而開發(fā)者 Miguel Palhas 則賦予了它酷炫的動(dòng)畫效果。你會(huì)發(fā)現(xiàn)構(gòu)成它的動(dòng)畫效果有兩個(gè)因素，即 LOGO 的文字和“ S ”形圖標(biāo)。

作品是基于 SVG 元素構(gòu)成的，也使操縱更簡單。雖然作品中的大多數(shù)動(dòng)畫都是基于 CSS 編寫的，但它也依賴 JavaScript 庫：TweenLite。同時(shí)，這個(gè)作品可以根據(jù)用戶的操作來重復(fù)或觸發(fā)動(dòng)畫效果。（懸停、點(diǎn)擊等）

項(xiàng)目地址：https://codepen.io/naps62/pen/eNMvpQ

7. Pixel Logo Animation

通過使用免費(fèi)的像素字體，任何開發(fā)人員都可以制作出自定義的像素動(dòng)畫。而這個(gè)作品就是由 CodePen 的用戶 Khaosmuhaha 所制作的。

他通過 HTML Canvas 元素進(jìn)行純文本的操作，動(dòng)畫效果則是由 CSS3 的 animation 屬性進(jìn)行驅(qū)動(dòng)，而 jQuery 則控制了全部。所以，我們所見的連續(xù)像素動(dòng)畫就這樣實(shí)現(xiàn)了。

顯然，這是一個(gè)利用 Canvas 元素與 webfont 構(gòu)成的炫酷的作品。

項(xiàng)目地址：https://codepen.io/Khaosmuhaha/pen/MYzRGz

8. Alex Aloia LOGO

如果你正在尋找一個(gè)真正復(fù)雜的 LOGO 動(dòng)畫，可以看看開發(fā)者 Alex Aloia 制作的這個(gè)示例。在作品中，作者使用了他的名字作為品牌名稱，并將一系列復(fù)雜的 SVG 形狀通過繪圖的動(dòng)畫效果展現(xiàn)出來。

作品的整體效果只通過 CSS 來實(shí)現(xiàn)是不太可能的，還需要一些 JS 庫（DrawSVG 和更流行的 D3.js）的支持。但是，利用開源庫來實(shí)現(xiàn)這種獨(dú)一無二的動(dòng)畫，還是非常有趣的。

項(xiàng)目地址：https://codepen.io/tripl3inf/pen/QwrEMY

9. Bayleys

Bayleys 的 LOGO 動(dòng)畫的選擇，有些令人費(fèi)解。但 LOGO 厚實(shí)的邊緣使重制變得易如反掌。開發(fā)者 Rafael Contreras 僅通過 38 行代碼便實(shí)現(xiàn)了動(dòng)畫效果。

LOGO 是基于 SVG 標(biāo)簽制作的，動(dòng)畫效果則是操縱相應(yīng)的標(biāo)簽來實(shí)現(xiàn)。而在不同的方向移動(dòng)的眾多 LOGO 元素，使動(dòng)畫令人著迷。

項(xiàng)目地址：https://codepen.io/rafita/pen/aNyRgv

10. Nintendo Switch

這是來自任天堂最新款游戲機(jī)的一個(gè) LOGO 動(dòng)畫。而開發(fā)者 Koto Furumiya 在 CodePen 上實(shí)現(xiàn)了它們廣告片中的動(dòng)畫效果。

Koto 使用 SVG 重制了任天堂 Switch 的 LOGO，并用 CSS 實(shí)現(xiàn)了它的動(dòng)畫效果。你會(huì)相信這個(gè)動(dòng)畫只需要 50 行的 CSS 代碼嗎？

另外，不得不提這個(gè)動(dòng)畫效果確實(shí)很逼真。強(qiáng)有力的下推與反彈回升效果，確實(shí)與任天堂 Switch 的開機(jī)動(dòng)畫相吻合。

項(xiàng)目地址：https://codepen.io/kotofurumiya/pen/VPmNrR

最后

今天分享的所有示例都是免費(fèi)與開源的，希望你能將它們應(yīng)用在你自己的項(xiàng)目上。同時(shí)，也希望你能喜歡這些 Demos。如果你正在尋找更多關(guān)于 CSS 動(dòng)畫的示例，也可以了解下這個(gè)合輯。

感謝你的閱讀。

注：

本文版權(quán)歸原作者所有，僅用于學(xué)習(xí)與交流。
如需轉(zhuǎn)載譯文，煩請(qǐng)按下方注明出處信息，謝謝！

英文原文：10 Amazing Examples of CSS & JavaScript Animated Logos
作者：Jake Rocheleau
譯者：IT程序獅
譯文地址：http://www.jianshu.com/p/b204e854a942

GitHub精選》是我們分享Github中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)使用純CSS實(shí)現(xiàn)動(dòng)畫加載效果的項(xiàng)目——SpinKit。

SpinKit通過使用transform和opacity屬性實(shí)現(xiàn)了包括方塊翻轉(zhuǎn)、圓點(diǎn)旋轉(zhuǎn)、圓環(huán)縮放和九宮格漸變等10余種動(dòng)畫加載的效果。

部分效果代碼：

方塊折疊

<div class="sk-folding-cube">
  <div class="sk-cube1 sk-cube"></div>
  <div class="sk-cube2 sk-cube"></div>
  <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
</div>

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}

三點(diǎn)漸變

<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

其他效果：

GitHub: https://github.com/tobiasahlin/SpinKit

在線咨詢

上一篇：必看！用CSS命令繪制常用小圖標(biāo)，手把手教你操作
下一篇：CSS基礎(chǔ)知識(shí)(一) CSS入門

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

十六種炫酷純css加載動(dòng)畫（一）

1. Flowers SVG

2. Carbon LDP

3. Binary Lab

4. Pure CSS3 Stack Overflow

5. Monster Energy Logos

6. Subvisual

7. Pixel Logo Animation

8. Alex Aloia LOGO

9. Bayleys

10. Nintendo Switch

最后

您的項(xiàng)目需求