性爱有声小说在线收听,玄幻小说排行榜完本

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

7.1萬Star！超實用，60多種動畫效果的CSS庫

簡介

animate.css 是一個有趣的，跨瀏覽器的 css3 動畫庫，兼容性好，使用方便。它預(yù)設(shè)了抖動、閃爍、彈跳、翻轉(zhuǎn)、旋轉(zhuǎn)、淡入淡出等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。

沙洋網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

animate.css 基于 CSS3，只兼容支持 CSS3 animate 屬性的瀏覽器，IE10+、Firefox、Chrome、Opera、Safari。

項目地址是：

https:// github.com/animate-css/ animate.css

安裝

使用 npm 安裝：

 
 
 
 
  
  
  
  $ npm install animate.css --save

使用 yarn 安裝：

 
 
 
 
  
  
  
  $ yarn add animate.css

使用 CDN 直接引入：

 
 
 
 
  
  
  
   
  
  
  
    
  
  
  
  
    rel="stylesheet" 
  
  
  
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
  
  
  
    />

簡單使用

基本用法。安裝 animate.css 后，將以下屬性添加到中即可完成動畫效果的創(chuàng)建。

 
 
 
 
  
  
  
  An animated element

自定義屬性。使用自定義屬性來定義動畫持續(xù)時間、延遲，這使得它非常靈活，當(dāng)需要更改動畫持續(xù)時間的時間，只需要為全局或本地設(shè)置一個新值。

 
 
 
 
  
  
  
  /* This only changes this particular animation duration */ 
  
  
  
  .animate__animated.animate__bounce { 
  
  
  
    --animate-duration: 2s; 
  
  
  
  } 
  
  
  
   
  
  
  
  /* This changes all the animations globally */ 
  
  
  
  :root { 
  
  
  
    --animate-duration: 800ms; 
  
  
  
    --animate-delay: 0.9s; 
  
  
  
  }

同時自定義屬性還可以動態(tài)更改所有時間受限的屬性，可以通過 JS 腳本動態(tài)修改。

 
 
 
 
  
  
  
  // All animations will take twice the time to accomplish 
  
  
  
  document.documentElement.style.setProperty('--animate-duration', '2s'); 
  
  
  
   
  
  
  
  // All animations will take half the time to accomplish 
  
  
  
  document.documentElement.style.setProperty('--animate-duration', '.5s');

延遲效果：可以直接在元素的 class 屬性上添加延遲效果：

 
 
 
 
  
  
  
  Example

// animate.css 提供了這些延遲屬性：

class 默認延遲時間

animate__delay-2s 2s

animate__delay-3s 3s

animate__delay-4s 4s

animate__delay-5s 5s

// 也可以通過 --animate-delay 屬性進行自定義：

/* All delay classes will take 2x longer to start */

:root {

--animate-delay: 2s;

}

/* All delay classes will take half the time to start */

:root {

--animate-delay: 0.5s;

}

動畫速度：可以通過添加這些 class 來控制動畫的速度：

 
 
 
 
  
  
  
  Example

// 速度的 class 包括這些：

class 默認速度

animate__slow 2s

animate__slower 3s

animate__fast 800ms

animate__faster 500ms

// 可以通過 --animate-duration 全局或本地屬性自定義動畫時間：

/* All animations will take twice as long to finish */

:root {

--animate-duration: 2s;

}

/* Only this element will take half the time to finish */

.my-element {

--animate-duration: 0.5s;

}

循環(huán)效果：可以通過添加這些 class 來控制動畫的循環(huán)次數(shù)：

 
 
 
 
  
  
  
  Example

// 可供選擇的 class 有：

class 循環(huán)次數(shù)

animate__repeat-1 1

animate__repeat-2 2

animate__repeat-3 3

animate__infinite 無限循環(huán)

// 類似的，也可以自定義循環(huán)次數(shù)：

/* The element will repeat the animation 2x

It's better to set this property locally and not globally or

you might end up with a messy situation */

.my-element {

--animate-repeat: 2;

}

網(wǎng)頁題目：7.1萬Star！超實用，60多種動畫效果的CSS庫
標題網(wǎng)址：http://www.fisionsoft.com.cn/article/cojiccg.html

新聞中心

簡介

安裝

簡單使用

其他資訊