這是一組效果非常炫酷的純CSS3 Loading加載動畫特效。這組loading動畫共有27種不同的效果。每一種loading動畫都是通過CSS3的keyframes幀動畫來完成的，每一個加載動畫都構(gòu)思新穎，效果非常的酷。

安裝

可以通過bower來按鈕這個loading動畫特效：

bower install loaders.css

使用方法

使用這個loading加載動畫特效的時候，建議將效果中所需要的HTML元素包裹在一個容器中，并將包裹容器的顯示設(shè)置為：display:flex，下面以“吃豆子”加載動畫為例：

外圍div.loader是包裹元素，它的顯示要設(shè)置為：display:flex。

CSS動畫

5個空的div中，第一個使用div:first-of-type選擇器來選擇并將其制作為吃豆人(pacman)，余下的4個div分別使用nth-child選擇器來選擇并制作為“豆子”。最后使用CSS3 keyframes動畫將“豆子”運(yùn)動起來：

@-webkit-keyframes pacman-balls {

75% {

opacity: 0.7; }

100% {

-webkit-transform: translate(-100px, -6.25px);

transform: translate(-100px, -6.25px); } }

@keyframes pacman-balls {

75% {

opacity: 0.7; }

100% {

-webkit-transform: translate(-100px, -6.25px);

transform: translate(-100px, -6.25px); } }

.pacman {

position: relative; }

.pacman > div:nth-child(2) {

-webkit-animation: pacman-balls 1s 0s infinite linear;

animation: pacman-balls 1s 0s infinite linear; }

.pacman > div:nth-child(3) {

-webkit-animation: pacman-balls 1s 0.25s infinite linear;

animation: pacman-balls 1s 0.25s infinite linear; }

.pacman > div:nth-child(4) {

-webkit-animation: pacman-balls 1s 0.5s infinite linear;

animation: pacman-balls 1s 0.5s infinite linear; }

.pacman > div:nth-child(5) {

-webkit-animation: pacman-balls 1s 0.75s infinite linear;

animation: pacman-balls 1s 0.75s infinite linear; }

.pacman > div:first-of-type {

width: 0px;

height: 0px;

border-right: 25px solid transparent;

border-top: 25px solid #fff;

border-left: 25px solid #fff;

border-bottom: 25px solid #fff;

border-radius: 25px;

}

.pacman > div:nth-child(2), .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5) {

background-color: #fff;

width: 15px;

height: 15px;

border-radius: 100%;

margin: 2px;

width: 10px;

height: 10px;

position: absolute;

-webkit-transform: translate(0, -6.25px);

-ms-transform: translate(0, -6.25px);

transform: translate(0, -6.25px);

top: 25px;

left: 100px;

}

總結(jié)

以上是生活随笔為你收集整理的html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。