溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何利用CSS3創建實用的加載動畫效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何利用CSS3創建實用的加載動畫效果”這篇文章吧。
在進入網站時，因為需要顯示許多圖片，往往需要加載一段時間。如果這里添加一個動態的加載效果，這樣就不會讓等待變得枯燥。例如下圖這樣：
本篇文章就來給大家分享兩種使用CSS3實現的實用動畫效果。這兩種方法都是利用animation和@keyframes來實現，下面我們來看看實現代碼：
第一種效果的實現方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html,
body {
padding: 0;
height: 100%;
display: table;
margin: 0 auto;
font-size: 52px;
font-family: Monaco, Consolas, "Lucida Console", monospace;
background-image: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/kindajean.png");
}
.loading {
text-align: center;
display: table-cell;
vertical-align: middle;
text-shadow: grey 1px 1px 1px;
}
.letter {
float: left;
width: 35px;
height: 60px;
position: relative;
-webkit-animation: flip 2s infinite;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
}
.letter div {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform: translate(0);
-webkit-backface-visibility: hidden;
-webkit-animation: color 8s infinite;
}
.letter div.back {
-webkit-transform: rotateY(180deg);
}
.letter:nth-child(1),
.letter:nth-child(1) div {
-webkit-animation-delay: 0.125s;
}
.letter:nth-child(2),
.letter:nth-child(2) div {
-webkit-animation-delay: 0.25s;
}
.letter:nth-child(3),
.letter:nth-child(3) div {
-webkit-animation-delay: 0.375s;
}
.letter:nth-child(4),
.letter:nth-child(4) div {
-webkit-animation-delay: 0.5s;
}
.letter:nth-child(5),
.letter:nth-child(5) div {
-webkit-animation-delay: 0.625s;
}
.letter:nth-child(6),
.letter:nth-child(6) div {
-webkit-animation-delay: 0.75s;
}
.letter:nth-child(7),
.letter:nth-child(7) div {
-webkit-animation-delay: 0.875s;
}
.letter:nth-child(8),
.letter:nth-child(8) div {
-webkit-animation-delay: 1s;
}
.letter:nth-child(9),
.letter:nth-child(9) div {
-webkit-animation-delay: 1.125s;
}
.letter:nth-child(10),
.letter:nth-child(10) div {
-webkit-animation-delay: 1.25s;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: rotateY(0deg) translate(0);
}
40%,
100% {
-webkit-transform: rotateY(180deg) translate(0);
}
}
@-webkit-keyframes color {
0% {
color: #88E488;
}
25% {
color: #EEADB7;
}
50% {
color: #90C9DB;
}
75% {
color: #F3B034;
}
100% {
color: #828282;
}
}
</style>
</head>
<body>
<body>
<div class="loading">
<div class="letter">
<div>L</div>
<div class="back">L</div>
</div>
<div class="letter">
<div>o</div>
<div class="back">o</div>
</div>
<div class="letter">
<div>a</div>
<div class="back">a</div>
</div>
<div class="letter">
<div>d</div>
<div class="back">d</div>
</div>
<div class="letter">
<div>i</div>
<div class="back">i</div>
</div>
<div class="letter">
<div>n</div>
<div class="back">n</div>
</div>
<div class="letter">
<div>g</div>
<div class="back">g</div>
</div>
<div class="letter dot">
<div>.</div>
<div class="back">.</div>
</div>
<div class="letter dot">
<div>.</div>
<div class="back">.</div>
</div>
<div class="letter dot">
<div>.</div>
<div class="back">.</div>
</div>
</div>
</body>
</body>
</html>在上面代碼中，先使用兩個animation屬性給每個字綁定兩種動畫flip和color，分別控制翻轉動作和顏色變化；然后分別利用@keyframes規則，給兩個動畫設置每一幀的動作即可。
翻轉動作需要使用transform屬性來控制，它可以向元素應用 2D 或 3D 轉換。
效果如下：
下面的效果也是同一種實現思想，只是在細微處有點改變。
第二種效果的實現方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,
body {
padding: 0;
height: 100%;
display: table;
margin: 0 auto;
font-size: 52px;
font-family: Monaco, Consolas, "Lucida Console", monospace;
background: #F5F5F5;
}
.loading {
top: 50%;
left: 50%;
width: 350px;
height: 60px;
font-size: 52px;
position: absolute;
text-align: center;
margin-top: -30px;
margin-left: -175px;
text-shadow: #808080 1px 1px 1px;
font-family: Monaco, Consolas, "Lucida Console", monospace;
}
.letter {
float: left;
width: 35px;
height: 60px;
position: relative;
animation: flip 2s infinite;
transform-style: preserve-3d;
transition: transform 1s;
}
.letter div {
color: #4B6;
width: 100%;
height: 100%;
position: absolute;
transform: translate(0);
backface-visibility: hidden;
animation: color 16s infinite;
}
.letter div.back {
transform: rotateY(180deg);
}
.letter:nth-child(1),
.letter:nth-child(1) div {
animation-delay: 0.125s;
}
.letter:nth-child(2),
.letter:nth-child(2) div {
animation-delay: 0.25s;
}
.letter:nth-child(3),
.letter:nth-child(3) div {
animation-delay: 0.375s;
}
.letter:nth-child(4),
.letter:nth-child(4) div {
animation-delay: 0.5s;
}
.letter:nth-child(5),
.letter:nth-child(5) div {
animation-delay: 0.625s;
}
.letter:nth-child(6),
.letter:nth-child(6) div {
animation-delay: 0.75s;
}
.letter:nth-child(7),
.letter:nth-child(7) div {
animation-delay: 0.875s;
}
.letter:nth-child(8),
.letter:nth-child(8) div {
animation-delay: 1s;
}
.letter:nth-child(9),
.letter:nth-child(9) div {
animation-delay: 1.125s;
}
.letter:nth-child(10),
.letter:nth-child(10) div {
animation-delay: 1.25s;
}
@keyframes flip {
0% {
transform: rotateY(0deg) translate(0);
}
40%,
100% {
transform: rotateY(180deg) translate(0);
}
}
@keyframes color {
1.5% {
color: #6AD;
}
3%,
12.5% {
color: #F80;
}
14% {
color: #4B6;
}
15.5%,
25% {
color: #F68;
}
26.5% {
color: #C83;
}
28%,
37.5% {
color: #96C;
}
39% {
color: #C83;
}
40.5%,
50% {
color: #E44;
}
51.5% {
color: #F80;
}
53%,
62.5% {
color: #4B6;
}
64% {
color: #F68;
}
65.5%,
75% {
color: #C83;
}
76.5% {
color: #96C;
}
78%,
87.5% {
color: #6AD;
}
89% {
color: #F80;
}
90.5%,
100%,
0% {
color: #4B6;
}
}
</style>
</head>
<body>
<div class="loader">
<div class="loading">
<div class="letter">
<div>L</div>
<div class="back">L</div>
</div>
<div class="letter">
<div>o</div>
<div class="back">o</div>
</div>
<div class="letter">
<div>a</div>
<div class="back">a</div>
</div>
<div class="letter">
<div>d</div>
<div class="back">d</div>
</div>
<div class="letter">
<div>i</div>
<div class="back">i</div>
</div>
<div class="letter">
<div>n</div>
<div class="back">n</div>
</div>
<div class="letter">
<div>g</div>
<div class="back">g</div>
</div>
<div class="letter">
<div>.</div>
<div class="back">.</div>
</div>
<div class="letter">
<div>.</div>
<div class="back">.</div>
</div>
<div class="letter">
<div>.</div>
<div class="back">.</div>
</div>
</div>
</div>
</body>
</html>效果如下：
下面介紹3個關鍵屬性animation、@keyframes和transform：
CSS3 animation（動畫） 屬性
語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name：指定要綁定到選擇器的關鍵幀的名稱 animation-duration：動畫指定需要多少秒或毫秒完成 animation-timing-function：設置動畫將如何完成一個周期 animation-delay：設置動畫在啟動前的延遲間隔。 animation-iteration-count：定義動畫的播放次數。 animation-direction：指定是否應該輪流反向播放動畫。 animation-fill-mode：規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 animation-play-state：指定動畫是否正在運行或已暫停。
@keyframes 規則
使用@keyframes規則可以創建動畫。創建動畫是通過逐步改變從一個CSS樣式設定到另一個。簡單來說：@keyframes就是用來設置動畫每一幀動作的。
@keyframes需要和animation 屬性一起使用才能實現動畫：
@keyframe規則由關鍵字“@keyframe”組成，后面接著是給出動畫名稱的標識符（將使用animation-name引用），隨后是通過一組樣式規則（用大括號分隔）。然后，通過使用標識符作為animation-name屬性的值，將動畫應用于元素。例如：
/* 定義動畫*/
@keyframes 動畫名稱{
/* 樣式規則*/
}
/* 將它應用于元素 */
.element {
animation-name: 動畫名稱（在@keyframes中已經聲明好的）;
/* 或使用動畫簡寫屬性*/
animation: 動畫名稱 1s ...
}CSS3 transform 屬性
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
語法：transform: none|transform-functions;
none 定義不進行轉換。 matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 translate(x,y) 定義 2D 轉換。 translate3d(x,y,z) 定義 3D 轉換。 translateX(x) 定義轉換，只是用 X 軸的值。 translateY(y) 定義轉換，只是用 Y 軸的值。 translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。 scale(x,y) 定義 2D 縮放轉換。 scale3d(x,y,z) 定義 3D 縮放轉換。 scaleX(x) 通過設置 X 軸的值來定義縮放轉換。 scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。 scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。 rotate(angle) 定義 2D 旋轉，在參數中規定角度。 rotate3d(x,y,z,angle) 定義 3D 旋轉。 rotateX(angle) 定義沿著 X 軸的 3D 旋轉。 rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。 rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。 skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。 skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。 perspective(n) 為 3D 轉換元素定義透視視圖。
以上是“如何利用CSS3創建實用的加載動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
