整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
路：
文字自下而上使用：top屬性
文字上色：使用::before偽元素，width從0 到100%實現；
文字下方的下劃線：使用::after偽元素+width實現；
實現代碼：
animate.css是一堆很酷，有趣且跨瀏覽器的動畫，供你在項目中使用。非常適合強調，主頁，滑塊和一般的加水效果。
animate.css v4正在進行許多改進和重大更改，包括CSS自定義屬性支持（又稱CSS變量）和類前綴，以確保安全使用。感興趣的小伙伴可以上github關注進展以及提供反饋！
animate.css的受歡迎程度毋庸置疑，在Github上star數高達接近63k，這是一個非常可觀的數據，我相信其實大多數人或多或少都用過它
https://daneden.github.io/animate.css/
$ 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;
}
將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>
通過添加這些類，可以控制動畫的速度，如下所示：
<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/
彈跳動畫
彈跳動畫
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
