整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文將使用CSS3動(dòng)畫keyframes創(chuàng)建一個(gè)頁(yè)面加載器，加載時(shí)帶著三個(gè)黃色圓點(diǎn)破浪形移動(dòng)。它將向您展示如何為加載頁(yè)面設(shè)計(jì)HTML樣式，創(chuàng)建動(dòng)畫的keyframes，并使用keyframes的動(dòng)畫延遲。
以下是你將在本教程結(jié)束時(shí)制作的內(nèi)容。
圖中的三個(gè)黃色圓點(diǎn)，在頁(yè)面加載過(guò)程中，呈現(xiàn)波浪形的跳動(dòng)。
首先，先創(chuàng)建一個(gè)基本的html文件：
<p>A simple representation of an animated bouncing loader!</p>
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
文中添加了一個(gè)名為loader類的div。這個(gè)div負(fù)責(zé)創(chuàng)建所有頁(yè)面加載器元素。在這個(gè)div中，添加了三個(gè)連續(xù)的span元素，每個(gè)元素表示一個(gè)頁(yè)面加載器圓點(diǎn)。
第二步為頁(yè)面定義基本的CSS：
/*_ OPTIONAL: Styles for the demo. *_/
body {
background: #2C294F;
padding: 2rem;
}
p {
font: 1rem/1.45 "Operator Mono";
color: #A599E9;
text-align: center;
}
這個(gè)代碼塊定義了p標(biāo)記和主體的可選CSS樣式。背景顏色，字體大小等屬性可以根據(jù)自己的愛(ài)好更改。不過(guò)這些都不是動(dòng)畫所必須的樣式，只是為了方便呈現(xiàn)動(dòng)畫效果。
關(guān)鍵的定義是下面的.loader樣式：
/_ CSS for animated bouncing loader. _/
.loader {
display: flex;
justify-content: center;
align-items: center;
}
這里我們使用Flexbox，也就是display:flex; 它將彈跳的頁(yè)面加載器水平和垂直放置在頁(yè)面中間。
/_ Loader circles _/
.loader > span {
background: #FAD000;
border-radius: 50%;
margin: 5rem 0.5rem;
animation: bouncingLoader 0.6s infinite alternate;
}
.loader > span:nth-child(2) {
animation-delay: 0.2s;
}
.loader > span:nth-child(3) {
animation-delay: 0.4s;
}
默認(rèn)情況下，頁(yè)面加載器的形狀是方形的。我們要給它一個(gè)圓形形狀，可以將邊界半徑設(shè)置為50%。.loader > span:nth-child(n)是指loader父元素下的第n個(gè)子元素。animation-delay是動(dòng)畫延遲時(shí)間。
這里最有趣的部分是animation屬性。我們使用了一個(gè)名為bouncingLoader的動(dòng)畫keyframes，它每0.6s運(yùn)行一次，并且無(wú)限重復(fù)。
定義動(dòng)畫的keyframes。keyframes用于定義動(dòng)畫行為，并讓我們完全控制CSS動(dòng)畫的一個(gè)周期。我們將它定義為@keyframes，后面跟著動(dòng)畫的名字，在本例中是bouncingLoader。
在@keyframe規(guī)則中，使用from和to兩個(gè)關(guān)鍵字來(lái)指定動(dòng)畫的起始點(diǎn)和結(jié)束點(diǎn)。同樣地，你也可以用0%表示起點(diǎn)，用100%表示動(dòng)畫的終點(diǎn)。
此外，如果您想要多個(gè)動(dòng)畫轉(zhuǎn)換，您可以定義一個(gè)百分比范圍，每個(gè)百分比包含一個(gè)樣式選擇器列表。這些百分比可以以任何順序列出。這些百分比的簡(jiǎn)單表示如下所示：
/_ Define the animation called bouncingLoader. _/
@keyframes bouncingLoader {
from {
width: 0.1rem;
height: 0.1rem;
opacity: 1;
transform: translate3d(0);
}
to {
width: 1rem;
height: 1rem;
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
}
這使用了from和to關(guān)鍵字，它們定義了圓點(diǎn)的寬度、高度和不透明度等基本樣式屬性。Loader中每個(gè)圓圈的寬和高從0.1rem到width:1rem;和height:1rem; 除此之外，為了創(chuàng)建彈跳效果，使用CSS transform屬性更改給定元素的坐標(biāo)，從而轉(zhuǎn)換每個(gè)圓點(diǎn)的位置。
使用這個(gè)transform屬性，采用了translate3D()函數(shù)，它接受三個(gè)輸入來(lái)解釋(x, y, z)坐標(biāo)的變化。因?yàn)槲覀兿Ｍ覀兊难b載機(jī)在波動(dòng)運(yùn)動(dòng)中運(yùn)行，我們需要主要沿著y軸平移，保持x軸和z軸不變。因此，結(jié)束點(diǎn)的值為(0，-1rem, 0)。
最后一部分。既然已經(jīng)為@keyframe編寫了代碼，現(xiàn)在就該設(shè)置并運(yùn)行它了。動(dòng)畫的運(yùn)行是通過(guò)以下幾行代碼實(shí)現(xiàn)的（上面已顯示過(guò)一次）:
/_ Loader circles _/
.loader > span {
background: #FAD000;
border-radius: 50%;
margin: 5rem 0.5rem;
animation: bouncingLoader 0.6s infinite alternate;
}
.loader > span:nth-child(2) {
animation-delay: 0.2s;
}
.loader > span:nth-child(3) {
animation-delay: 0.4s;
}
使用animation屬性和/或它的子屬性對(duì)想要?jiǎng)赢嫷脑剡M(jìn)行樣式設(shè)置。使用此屬性可以控制動(dòng)畫的時(shí)間、持續(xù)時(shí)間和其他細(xì)節(jié)。
這里你已經(jīng)使用了以下動(dòng)畫的子屬性:
animation: animation-name, animation-duration, animation-iteration-count, animation-direction;
animation-name: 定義你的動(dòng)畫的名字，在我的例子中是加載器。
animation-duration: 配置動(dòng)畫完成一個(gè)循環(huán)的時(shí)間長(zhǎng)度。
animation-iteration-count: 表示你希望動(dòng)畫循環(huán)在停止前播放多少次。
animation-direction: 定義動(dòng)畫播放的方向。
除了這些，還有其他幾個(gè)子屬性。你可以在Mozilla Web文檔中獲得詳細(xì)信息。
基于這些，本文的動(dòng)畫定義如下:
animation: bouncingLoader 0.6s infinite alternate;
這行代碼做了以下三件事:
告訴loader元素使用keyframes bouncingLoader。
設(shè)置動(dòng)畫的長(zhǎng)度為0.6秒。
無(wú)限次地運(yùn)行動(dòng)畫。在完成一個(gè)循環(huán)后，動(dòng)畫的方向就會(huì)發(fā)生變化，也就是反轉(zhuǎn)。
你已經(jīng)為彈跳加載器的第一個(gè)圓點(diǎn)定義了這些屬性。為了瞄準(zhǔn)第二個(gè)(2)和第三個(gè)(3)圓點(diǎn)，你使用了第n個(gè)子(n)選擇器，它允許你選擇和瞄準(zhǔn)一個(gè)或多個(gè)元素，它們是父元素的第n個(gè)子元素。此外，對(duì)于其余的span元素，您剛剛定義了動(dòng)畫延遲，因此每個(gè)元素不會(huì)同時(shí)開始動(dòng)畫，而是延遲了定義時(shí)間后才開始，結(jié)果就是破浪形狀。
前，圖片產(chǎn)業(yè)可能是一個(gè)快速成長(zhǎng)的行業(yè)。具有創(chuàng)造性的新網(wǎng)站如雨后春筍般，每天都會(huì)涌現(xiàn)出來(lái)，而 HTML 與 CSS 也存在于每一個(gè)控制指令中。
CSS 在電子結(jié)構(gòu)化內(nèi)容建設(shè)的道路上，還有很長(zhǎng)的路要走。它被用以管控文件布局的絕對(duì)精準(zhǔn)度，并以媒體類型來(lái)進(jìn)行對(duì)比布局。當(dāng)今的網(wǎng)站提供給了用戶多種類型的交互方式，而 CSS3 呈現(xiàn)的效果也被廣泛的應(yīng)用在其中。
搜尋免費(fèi)的代碼片段并不困難，但是需找遵循正確設(shè)計(jì)方向的設(shè)計(jì)視圖，卻很耗費(fèi)時(shí)間。今天分享的這份清單將有助于你提升知識(shí)，同時(shí)也能提升用戶訪問(wèn)網(wǎng)站的體驗(yàn)度。
===============================
1.Modern Google Loader
2.CSS Rainbow Loader
3.Single element Slack loader
4.CSS Cog loader
5.VSCO – CSS loader
6.Cube CSS Loader
7.Pure CSS3 loader
8.CSS Loader
9.CSS3 Loaders
10.CSS loaders kit
11.Tumblr-style cog loaders
12.Logo Loader
13.CSS Water filling Loader
14.CSS loader
15.CSS Weather Loader
16.Chrome Cast CSS Loader
17.Simple Loader
18.Random Loader
19.CSS loader
20.Android 4.4 Kitkat loader
21.CSS creative loading
22.Simple CSS loader
23.CSS Loading Animation
24.Loaders collection by Loaders.css
25.Animated CSS3 Loading Bar
26.CSS Loading animation
27.Pushing pixels CSS loader
28.Page Loading Effects
29.CSS Loader
30.2D and 3D Block Loaders
31.CSS loading text animation
32.Single element CSS spinners
33.Pace.js – Page Load Progress Bars
34.SpinKit – CSS loaders
35.Loading SVG loaders
36.12 free SVG loaders
37.Material Design preloader
結(jié)論
如果你擁有自己的網(wǎng)站或博客，并希望找到一些好看的加載和預(yù)載設(shè)計(jì)的話，那么上面提到的免費(fèi) HTML5，CSS3 預(yù)載動(dòng)畫將會(huì)以最有效的方式助你實(shí)現(xiàn)目標(biāo)。
注：
由于頭條不支持站外鏈接跳轉(zhuǎn)，請(qǐng)手動(dòng)復(fù)制地址：http://t.cn/RtbmtMg 在瀏覽器打開體驗(yàn)。
英文原文：Free HTML5 And CSS3 Loaders and Preloaders
譯者：IT程序獅
譯文源自：http://t.cn/RtbmtMg
原創(chuàng)翻譯，版權(quán)歸原作者所有，轉(zhuǎn)載請(qǐng)標(biāo)明出處，謝謝合作。
以往，想在HTML上實(shí)現(xiàn)動(dòng)畫效果，要不就用被喬布斯恨死的了Flash 動(dòng)畫，要不就用網(wǎng)頁(yè)動(dòng)畫圖像或者JavaScript 實(shí)現(xiàn)效果。在CSS3之后，就可以用CSS在HTML上實(shí)現(xiàn)動(dòng)畫了。
要?jiǎng)?chuàng)建 CSS3 動(dòng)畫，你需要了解 @keyframes 規(guī)則。現(xiàn)在 @keyframes 創(chuàng)建動(dòng)畫時(shí)，需將其綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。
用CSS3原生代碼創(chuàng)建動(dòng)畫，語(yǔ)法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，動(dòng)畫的名稱；
keyframes-selector：必需，動(dòng)畫時(shí)長(zhǎng)的百分比合法的值：0-100%， from（與 0% 相同），to（與 100% 相同）
css-styles：必需，一個(gè)或多個(gè)合法的 CSS 樣式屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動(dòng)起來(lái)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s;
-webkit-animation: firstan 5s; /* Safari and Chrome */
}
@keyframes firstan {
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div/>
</body>
</html>
輸出結(jié)果
如果每次都要自己手動(dòng)用CSS去創(chuàng)建動(dòng)畫，那效果太低了。為此，有人專門專門開發(fā)了CSS動(dòng)畫庫(kù)animation.css。可以在線https://animate.stylek看效果，它里面的動(dòng)畫效果，可以滿足大多數(shù)需求了。下載https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目錄下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用動(dòng)畫庫(kù)實(shí)現(xiàn)動(dòng)畫</title>
<link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
老陳說(shuō)編程，動(dòng)畫效果行
</main>
</body>
</html>輸出結(jié)果
好了，有關(guān)CSS動(dòng)畫效果的內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。
一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。
#前端##HTML5##CSS##程序員##Web#
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
