怎么用CSS3實(shí)現(xiàn)炫酷loading加載動(dòng)畫(huà)特效

本篇內(nèi)容主要講解“怎么用CSS3實(shí)現(xiàn)炫酷loading加載動(dòng)畫(huà)特效”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用CSS3實(shí)現(xiàn)炫酷loading加載動(dòng)畫(huà)特效”吧!

　　安裝

　　可以通過(guò)bower來(lái)按鈕這個(gè)loading動(dòng)畫(huà)特效：

　　bower install loaders.css

　　使用方法

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

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

　　CSS動(dòng)畫(huà)

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

　　@-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;

　　}

到此，相信大家對(duì)“怎么用CSS3實(shí)現(xiàn)炫酷loading加載動(dòng)畫(huà)特效”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！