CSS實現由下而上的文字動畫特效

路：

文字自下而上使用：top屬性

文字上色：使用::before偽元素，width從0 到100%實現；

文字下方的下劃線：使用::after偽元素+width實現；

實現代碼：

紹

animate.css是一堆很酷，有趣且跨瀏覽器的動畫，供你在項目中使用。非常適合強調，主頁，滑塊和一般的加水效果。

animate.css v4正在進行許多改進和重大更改，包括CSS自定義屬性支持（又稱CSS變量）和類前綴，以確保安全使用。感興趣的小伙伴可以上github關注進展以及提供反饋！

Github

animate.css的受歡迎程度毋庸置疑，在Github上star數高達接近63k，這是一個非常可觀的數據，我相信其實大多數人或多或少都用過它

https://daneden.github.io/animate.css/

安裝使用

使用npm安裝

$ npm install animate.css --save

或者 yarn:

$ yarn add animate.css

要在你網站中使用animate.css，只需將樣式表放入文檔的<head>中，然后將動畫類（animated）與任何動畫名稱一起添加到元素中，那么一個簡單的動畫效果就實現了，一下就是一個最簡單的例子：

<head>
 <link rel="stylesheet" href="animate.min.css">
</head>

<h1 class="animated infinite bounce delay-2s">Example</h1>

以下是你可以使用的所用動畫效果class

可以更改動畫的持續時間，添加延遲或更改動畫播放的次數：

.yourElement {
 animation-duration: 3s;
 animation-delay: 2s;
 animation-iteration-count: infinite;
}

JavaScript的用法：

將animate.css與Javascript結合使用時，可以使用animate.css進行大量其他工作。一個簡單的例子：

const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

還可以檢測動畫何時結束：

const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })

可以使用以下簡單功能來添加和刪除動畫：

function animateCSS(element, animationName, callback) {
 const node = document.querySelector(element)
 node.classList.add('animated', animationName)
 function handleAnimationEnd() {
 node.classList.remove('animated', animationName)
 node.removeEventListener('animationend', handleAnimationEnd)
 if (typeof callback === 'function') callback()
 }
 node.addEventListener('animationend', handleAnimationEnd)
}

并像這樣使用它：

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
 // Do something after animation
})

注意，這些示例使用的是ES6的const聲明，不再支持IE10和某些古老的瀏覽器。

設定延遲和速度：

可以直接在元素的class屬性上添加延遲，如下所示：

<div class="animated bounce delay-2s">Example</div>

快慢class

通過添加這些類，可以控制動畫的速度，如下所示：

<div class="animated bounce faster">Example</div>

自定義構建

Animate.css由gulp.js提供支持，這意味著你可以輕松創建自定義版本。

總結

有些時候你看到別人的網站，感覺速度也不是很快，但是很自然，那么很有可能是使用了動畫，使用動畫不會加快網站的訪問速度，但是可以讓網頁瀏覽器來更加的平滑、更加的自然，使用起來會感覺很舒適，不會給人卡頓的感覺！

甜圈動畫

http://jsfiddle.net/rd4L30m8/

甜甜圈動畫

大小圓點動畫

http://jsfiddle.net/rd4L30m8/1/

大小圓點

波浪動畫

http://jsfiddle.net/rd4L30m8/2/

波浪動畫

翻轉動畫

http://jsfiddle.net/rd4L30m8/3/

翻轉動畫

彈跳動畫

http://jsfiddle.net/rd4L30m8/4/

彈跳動畫

旋轉動畫

在線咨詢

上一篇：web前臺小測試題
下一篇：簡析html5、html的13條區別

您的項目需求

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

整合營銷服務商

CSS實現由下而上的文字動畫特效

紹

Github

安裝使用

總結

甜圈動畫

大小圓點動畫

波浪動畫

翻轉動畫

彈跳動畫

旋轉動畫

您的項目需求