前端干貨：利用css3編寫一個炫酷的波浪效果loading動畫

oading動畫在頁面過度等經(jīng)常會用到，我在工作中就寫過很多有趣的loading加載動畫，在這里，我就分享一個波浪效果的loading動畫寫法（在寫動畫前，可以先畫個草稿或動畫流程圖，充分思考動畫執(zhí)行的過程，再編寫代碼事半功倍哦）。

一、首先看下效果圖：

css3編寫的loading動畫

二、html代碼很簡單，就是一個外層div，加上幾個運動的span（動畫效果的只有span，外層div僅僅是為了方便span居中）：

<div class="loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

三、css代碼我們一步一步分析：

1、讓loading居中顯示，同時讓它變成flex容器，這樣span就能設置寬高。

.loading{display: flex; width: 100px; height: 50px; position: absolute; top:50%; left: 50%; transform: translate(-50px,-25px);}

2、分析下這10個span的動畫過程：我們把動畫從開始到結束分成100份，0%的時候高度幾乎沒有，位置靠左，高度由小變大，大概15%的時候，突然變很高，顏色很深，并且右移很多，然后依次變矮，變淺，左移，以此類推。通過這個分析，我們寫起來就有方向了。

2、根據(jù)動畫效果和剛才的分析，10個span平分loading的寬度，高度我們就寫和loading一樣的高度，然后利用scaleY將它縮小，初始深點的背景色，在動畫結束時，我們將顏色設置的很淺（顏色過渡建議同色系深淺變化或者相鄰色系變化，比較自然好看，不建議顏色過渡特別大）。同時設置translateX也向左平移10像素（數(shù)值可以自己調整）。設置animation的動畫時間為1.5秒，動畫播放次數(shù)為無限次，動畫效果為先慢后快再慢。重點：10個span的動畫是以此執(zhí)行，這里我們利用css3的var變量（文章末尾我們再來簡單了解下這個css3 var以及css3計算calc）來動態(tài)編寫動畫延時：

.loading span {
 width: 10px;
 height: 50px;
 background-color: #308dec;
 transform: scaleY(0.01) translateX(-10px);
 animation: load-ani 1.5s infinite ease-in-out;
 animation-delay: calc(var(--n) * 0.05s);
}

3、分別設置十個span的延時時間（后面分析var的時候再來討論為什么這么寫）

.loading span:nth-child(1) { --n: 1; }
.loading span:nth-child(2) { --n: 2; }
.loading span:nth-child(3) { --n: 3; }
.loading span:nth-child(4) { --n: 4; }
.loading span:nth-child(5) { --n: 5; }
.loading span:nth-child(6) { --n: 6; }
.loading span:nth-child(7) { --n: 7; }
.loading span:nth-child(8) { --n: 8; }
.loading span:nth-child(9) { --n: 9; }
.loading span:nth-child(10) { --n: 10; }

4、最后來寫animate動畫，有了前面詳細的分析，這里就沒什么好解釋的了，高度從0.01倍過渡到1.2倍再過渡到初始的0.01倍，1.2倍是從15%開始的，所以才有了上面的“突然”的效果。至此loading動畫就寫完了。

@keyframes load-ani {
 0%, 100% {
 transform: scaleY(0.01) translateX(-10px);
 }
 15% {
 transform: scaleY(1.2) translateX(20px);
 }
 90%, 100% {
 background-color: #aed4fb;
 }
}

我們重點來分析下span動畫依次執(zhí)行的原理，先來說下css3 的 var 變量，先看下面的代碼：

div{
	--green: #4CAF50;
	background-color: var(--green);
}

設置div的背景色為#4CAF50。這里的--green就是一個變量，變量名是green，值是“#4CAF50”，“--”是css3規(guī)定的變量的前綴，而var()里面放的是變量名，表示使用這個變量的值，當然，還有一些用法，如默認值等，這個關注IT學堂，我們將會在后面的文章中專門介紹css3 var的用法。

calc比var要出名，用過的人一定很多，它能進行css的一些計算，如加減乘除，需要注意的是，操作符左右要有空格，否則不起作用，如：

calc(10px + 10px) //20px
calc(10px+10px) //錯誤

理解了var和calc，就很簡單了：calc(var(--n) * 0.05s) 其實就是拿變量n*0.05s，而n則在第三步對每個span都進行了設置，隨著n的不斷變大，延時時間也就依次變長。

好了，今天的教程就到這里了，不知道您有收獲沒。有疑問和建議的，可以在下方留言。關注IT學堂，每天都有干貨哦！

現(xiàn)文字波浪動畫，我們首先想到的是使用 Javascript 來實現(xiàn)。如今，現(xiàn)代 CSS 屬性已逐漸被現(xiàn)代瀏覽器所支持，本文將探索使用純 CSS 來實現(xiàn)。

1.效果預覽

2.實現(xiàn)方案

實現(xiàn)方案主要使用現(xiàn)代 CSS 提供的樣式屬性來實現(xiàn)：

一個 HTML 元素 h1
text-stroke 實現(xiàn)文字鏤空
background-clip 實現(xiàn)背景裁切
radial-gradient 實現(xiàn)背景漸變
animation 實現(xiàn)波浪動畫

2.1.創(chuàng)建頁面框架

使用 html:5 和 div[class=wavy-text]{Wavy Text Animation} 快速創(chuàng)建頁面框架:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>現(xiàn)代CSS：純 CSS 實現(xiàn)文字波浪動畫</title>
  </head>
  <body>
    <div class="wavy-text">Wavy Text Animation</div>
  </body>
</html>

2.2.實現(xiàn)文字鏤空效果

鏤空效果實現(xiàn)比較簡單，主要通過 color 和 text-stroke 屬性來實現(xiàn)

.wavy-text {
  --color: #269af2;
  color: transparent;
  -webkit-text-stroke: 0.2rem var(--color);
}

2.3.實現(xiàn)背景色漸變

背景色漸變，主要使用到了 radial-gradient 和

.wavy-text {
  --color: #269af2;

  --_p: 93% 83.5% at;
  --_g1: radial-gradient(var(--_p) bottom, var(--color) 79.5%, #0000 80%)
    no-repeat;
  --_g2: radial-gradient(var(--_p) top, #0000 79.5%, var(--color) 80%)
    no-repeat;
  /* 背景顏色 */
  background: var(--_g1), var(--_g2), var(--_g1), var(--_g2);
}

2.4.實現(xiàn)背景裁切

背景裁切主要用到了 CSS 屬性 background-clip, 實現(xiàn)文本裁切效果。該屬性已經(jīng)被現(xiàn)代瀏覽器所支持，但是部分瀏覽器需要使用 -webkit- 前綴來支持。

.wavy-text {
  -webkit-background-clip: text;
          background-clip: text;
}

2.5.實現(xiàn)波浪動畫

實現(xiàn)波浪動畫，主要是通過背景位置 backgroun-position 和 background-size 的變化來實現(xiàn)，動畫中增加了無線循環(huán)。

.wavy-text {
  animation: s 2s infinite alternate, m 3s infinite linear;
}
@keyframes m {
  0% {
    background-position: -200% 100%, -100% 100%, 0% 100%, 100% 100%;
  }
  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%, 300% 100%;
  }
}
@keyframes s {
  0% {
    background-size: 50.5% 80%;
  }
  33% {
    background-size: 50.5% 70%;
  }
  66% {
    background-size: 50.5% 85%;
  }
  100% {
    background-size: 50.5% 95%;
  }
}

2.6.實現(xiàn)文本居中

實現(xiàn)文本水平垂直居中，我們僅用了一行 CSS 代碼 place-content 來實現(xiàn)，它是 align-content 和 justify-content 的混合屬性。

body {
  display: grid;
  place-content: center;
}

3.總結

現(xiàn)代 CSS 相關屬性已經(jīng)被越來越多的瀏覽器所支持，通過 CSS 來實現(xiàn)的效果也越來越多，歡迎大家和小懶一起關注和學習。

如果本文對您有幫助，歡迎關注、點贊和轉發(fā)，感謝您的支持！

SS3實戰(zhàn)小技巧--使用CSS變量實現(xiàn)波浪動畫

2017年3月，微軟宣布 Edge 瀏覽器將支持 CSS 變量，這個重要的 CSS 新功能，所有主要瀏覽器已經(jīng)都支持了

聲明css變量的時候，變量名前面要加兩根連詞線（--）。變量名大小寫敏感， --ft-size和 --Ft-size 是兩個不同變量。變量的值既可以是純數(shù)字，也可以有單位

--ft-size: 30;
--Ft-size: 30px;

var()函數(shù)用于讀取變量。var()函數(shù)還可以使用第二個參數(shù)，表示變量的默認值。如果該變量不存在，就會使用這個默認值。第二個參數(shù)不處理內部的逗號或空格，都視作參數(shù)的一部分

font-size: var(--size,30px);

如果變量值是一個字符串，可以與其他字符串拼接

--size: 24px;
font-size: var(--size);

如果變量值是數(shù)值，不能與數(shù)值單位直接連用。必須使用calc()函數(shù)，將它們連接

--size: 30;
font-size: calc(var(--size) * 1px);

變量存在局部變量與全局變量

.txt1 {
    /* 聲明一個純數(shù)值的局部變量 */
    --size: 30;
    font-size: calc(var(--size) * 1px);
}
.txt2 {
    /* 聲明一個有單位的局部變量 */
    --size: 24px;
    font-size: var(--size);
}

可以使用@supports命令檢測瀏覽器是否兼容css變量

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a',0);
if(isSupported) {
    /* 這里面是支持css變量的操作 */
}else {
    /* 這里面是不支持css變量的操作 */
}

JavaScript操作css變量的寫法

//設置變量
document.querySelector('p').style.setProperty('--weight','bold');
//讀取變量
document.querySelector('p').style.getPropertyValue('--weight');
//刪除變量
document.querySelector('p').style.removeProperty('--weight');

實戰(zhàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #1a7156;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        img {
            width: 45px;
            animation: hjAnimate 1s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.1s);
        }
        @keyframes hjAnimate {
            0% {
                transform: translateY(0);
            }
            20% {
                transform: translateY(-50px);
            }
            40%,100% {
                transform: translateY(0);
            }
        }
</style>
</head>
<body>
    <div>
        <img src="huaji.png" style="--i:1">
        <img src="huaji.png" style="--i:2">
        <img src="huaji.png" style="--i:3">
        <img src="huaji.png" style="--i:4">
        <img src="huaji.png" style="--i:5">
        <img src="huaji.png" style="--i:6">
    </div>
</body>
</html>

總結

學以致用，每日累積一點點，每天快樂一點點。

作者：技術大黍
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。

在線咨詢

上一篇：HTML 顏色
下一篇：應屆生4天的時間來制作一個簡單的HTML按鈕和CSS，應該解雇他嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商