十六種炫酷純css加載動畫（一）

個好的開篇，會給你這個項目增加不少分值。

有沒有遇到過打開頁面加載一段時間，頁面內容才加載出來。在等待加載的過程中頁面卻是空白頁，給用戶的體驗特別不好，會讓項目降一個檔次。下面的十六種炫酷炸裂的css加載動畫，會讓你在等待的過程中，體驗視覺盛宴，給用戶不一般的加載體驗，對，就是純css3的炫酷加載動畫，請看效果！

碼字不易，且行且珍惜。

加載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>

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

碼下載—關注微信號：創意門主—回復：“CSS動畫”即可獲取原碼

10例動畫特效，別看預覽圖其實效果還是蠻華麗的，還有很多總有一個是您的菜。

欲善其事，必先利其器。在我們開發的過程中，一些“輪子”、工具能夠幫助我們應對項目中切實的需求，提升開發的效率。所以，日常收集一些庫或工具就顯得尤為重要了。畢竟，遇見需求/問題的時候，能做到“家有余糧，心中不慌。”

在本期中，我依然精選了一些近期收羅的開源庫、工具以及我的微博上 #每日一Pen# 話題中大家轉發較多的編程靈感，希望你們有所收獲。

前端

1. TypeLighter.js

TypeLighter.js 是一款輕量級（Gzip 壓縮后僅 1.04KB）的 JS 庫，能夠幫助你實現打字機效果。它提供了 8 個屬性（寫入速度、寫入/刪除延遲等）供你微調，更改 data 屬性即可更改其值。 ????

項目地址：
https://github.com/EdernClemente/TypeLighterJS

2.Clendar

Clendar 是一款輕量級、無依賴的 JS 日歷組件。它具備簡潔的 API，適用于 React、Vue、Angular 等框架。 ????

項目地址：
https://github.com/simbawus/calendar

3.Lax.js

Lax.js 是一款輕量的 Vanilla JS 插件，當頁面滾動時，創建流暢、炫酷的動畫效果，讓你的網站“動”起來。

項目地址：
https://github.com/alexfoxy/laxxx

4.HIUI

HIUI 是由小米開源的面向中后臺系統的前端組件庫。它以用戶體驗一致性為出發點，提供類型全面的組件庫和頁面模板，幫助開發人員快速實現交互一致、界面美觀的界面開發。 ?

項目地址：
https://github.com/XiaoMi/hiui

5.awesome-coding-js

這個倉庫整合了大量算法和數據結構的 JavaScript 實現，涉及經典排序算法、二叉樹、鏈表、字符串等內容，鞏固基礎的朋友，可以關注下。

項目地址：
https://github.com/ConardLi/awesome-coding-js

6.JS-Dev-Reads

專為 JS 開發者匯總的閱讀清單，涉及圖書推薦、文章精選等內容。

項目地址：
https://github.com/twhite96/js-dev-reads

后端

1.JetCache

JetCache 是由阿里巴巴開源的通用緩存訪問框架，它提供了統一的 API 和注解來簡化緩存的使用。如果你了解 SpringCache 的話，那么更容易接受它，因為它比 SpringCache 更強大。它支持 TTL、兩級緩存、分布式緩存自動刷新、異步 Cache API，還可以手動去操作緩存實例。

項目地址：
https://github.com/alibaba/jetcache

2.architect-awesome

一套非常全面的后端架構師技術圖譜，從數據結構與算法著手，帶你學習后端技術的方方面面。目前 GitHub 上已有 3.7W Star，值得推薦。

項目地址：
https://github.com/xingshaocheng/architect-awesome

3.Bistoury

Bistoury 是去哪兒網開源的一個對應用透明，無侵入的 Java 應用診斷工具。它提供了在線 Debug、線程級 CPU 監控等諸多功能，幫助開發人員直接通過日志、內存、線程、類信息、調試、機器和系統屬性等各個方面對應用進行診斷，提升開發人員的診斷效率和診斷能力。

項目地址：
https://github.com/qunarcorp/bistoury

4.Python-Crawler-Tutorial-Starts-From-Zero

這是 Python 從零到一爬蟲系列教程。教程涉及爬蟲預備知識、請求分析流程、Requests 模塊的使用等基礎知識部分，以及 3 個項目實例內容，幫助你零到一學會 Python 爬蟲。

項目地址：
https://github.com/Kr1s77/Python-crawler-tutorial-starts-from-zero

5.VHR

VHR（微人事）是一個由 SpringBoot+Vue 開發的人力資源管理系統。項目采用前后端分離，并提供了詳細的開發文檔，供參考與學習。

項目地址：
https://github.com/lenve/vhr

移動端

1.Morec

Morec 是一個精美的 Flutter 版電影客戶端。它利用了豆瓣現有的 API，實現了具備電影搜索、電影榜單、詳情介紹等完整功能的電影展示，或許這個項目能給你一些參考。 ?

項目地址：
https://github.com/Mayandev/morec

2.PickerView

這是一個非常好用的 Android PickerView 庫，內部提供 2 種常用類型的 Picker.它支持擴展自定義 Picker、自定義彈窗，也可作為 View 的非彈窗場景。

項目地址：
https://github.com/jaaksi/pickerview

3.Xpush

Xpush 是一款輕量級、可插拔的 Android 消息推送框架。它集成便捷，提供了一鍵集成推送（極光推送、友盟推送、華為、小米推送等），它具備豐富的功能（支持推送相關的注冊、注銷，標簽的增加、刪除、獲取等操作），還支持統一的消息訂閱、增加消息過濾器、支持 Android 9.0.

項目地址：
https://github.com/xuexiangjys/XPush

工具/資源

1.React Image Crop

React Image Crop 是一款響應式圖像剪裁工具，它具備輕量、無依賴、響應式、支持觸控等特性。

項目地址：
https://github.com/DominicTobias/react-image-crop

2.Chrome 插件英雄榜

這個倉庫匯集了眾多優秀、實用的 Chrome 插件，并提供了詳盡的說明。或許，你會淘到自己喜歡的工具。

項目地址：
https://github.com/zhaoolee/ChromeAppHeroes

3.Microsoft Whiteboard

Microsoft Whiteboard 是由微軟推出的一款電子白板軟件，能幫助你便捷的記錄想法、靈感與創意。它支持實時協作，云端保存等功能。目前可以免費下載，喜歡的朋友可以試試。 ????

項目地址：
https://products.office.com/zh-cn/microsoft-whiteboard/digital-whiteboard-app

4.StarrySky

這是一個豐富的音樂播放封裝庫。它針對快速集成音頻播放功能，減少大家搬磚的時間，提升開發效率。

項目地址：
https://github.com/EspoirX/StarrySky

5.Awesome Actions

這個倉庫匯集了與 GitHub Actions 相關的優質內容。除了官方推薦以外，作者還匯總了 Actions 相關的工具、應用、測試、服務等眾多內容。 ?

項目地址：
https://github.com/sdras/awesome-actions

6.A Programmer's Guide to English

這是一個專為程序員編寫的英語學習指南。面對網上雜七雜八的英語學習技巧，如果想要學好英語，這個指南將會減少你不必要花費的時間。

項目地址：
https://github.com/yujiangshui/A-Programmers-Guide-to-English

編程靈感

1.Simple CSS Waves

純 CSS 實現簡單的波浪動畫。

查看源碼：
https://codepen.io/goodkatz/pen/LYPGxQz

2.CSS 3D Carousel Room

CSS+JS 實現 3D Carousel Room 效果。

查看源碼：
https://codepen.io/Anemolo/pen/ERPvZV

3.Pure CSS Cute Cup

純 CSS 繪制可愛杯子動畫。

查看源碼：
https://codepen.io/keirafoxy/pen/JgdBVW

4.Play Hard

HTML+CSS+JS 實現《Play Hard》文字伸縮炫彩動畫。

查看源碼：
https://codepen.io/chrisgannon/pen/KONLar

5.CSS Only-Social Icons

純 CSS 實現帶有 Hover 效果的社交圖標。

查看源碼：
https://codepen.io/Stockin/pen/aQoQGr

彩蛋

100 Days Of ML Code

人工智能一直是科技領域的熱點，目前市場的需求也更為強烈，所以想學它人不在少數。但是，面對網絡上良莠不齊的學習資源，鑒別和甄選其價值卻耗費了我們不少時間與精力。今天分享的《100 Days Of ML Code》——百日機器學習計劃，在 GitHub 上可謂相當火爆，于是有熱心網友就將其翻譯成了中文版本，供大家參考與學習。

這是一個系統的學習計劃，作者圖文并茂的講述了機器學習的相關概念，并有源碼輔助教學，內容從易到難、循序漸進的幫你掌握機器學習的概念與應用，推薦給大家。

項目地址：
https://github.com/MLEveryday/100-Days-Of-ML-Code

感謝你的閱讀。若你有所收獲，點贊與分享是給我最大的支持。

注：

如需轉載，煩請按下方注明出處信息，謝謝！

作者：IT程序獅
原文地址：
https://zhuanlan.zhihu.com/p/81911980

同時也歡迎關注我的微信公眾號【IT程序獅】，不定期分享 IT 學習文章與資源。

整合營銷服務商

十六種炫酷純css加載動畫（一）

前端

后端

移動端

工具/資源

編程靈感

彩蛋

更多文章

您的項目需求