CSS3 動畫庫-animation

畫庫-animation.css

簡介

animate.css 是一個來自國外的 CSS3 動畫庫, 它預設了抖動(shake)、閃爍(flash)、彈跳(bounce)、翻轉(flip)、旋轉(rotateIn/rotateOut)、

淡入淡出(fadeIn/fadeOut)等多達 60 多種動畫效果, 幾乎包含了所有常見的動畫效果。

雖然借助 animate.css 能夠很方便、快速的制作 CSS3 動畫效果, 但還是建議看看 animate.css 的代碼, 也許你能從中學到一些東西。

瀏覽器兼容：當然是只兼容支持 CSS3 animate 屬性的瀏覽器, 他們分別是：IE10+、Firefox、Chrome、Opera、Safari。

使用

1github官網地址：https://daneden.github.io/animate.css/

中文API地址：http://www.dowebok.com/98.html

使用方法：

一、項目背景】

生活中經常會見到很多gif圖，那么gif圖到底是什么？GIF是一種位圖。簡單來說就是通過每一張張靜圖，通過控制它的關鍵幀，從而達到靜態圖動起來的效果。

這種GIF圖的效果，也可以用html+CSS3結合來做。

【二、項目目標】

完成GIF圖的制作。

【三、項目分析】

1、分析圖片。打開其中一張圖。

2、可以看到這張圖有45張不一樣動作的靜態圖合成。有點擊屬性。如圖所示：

看到這張照片是7020*156，一共有45幀。高度不變，寬度7020/45幀，就可以把每一幀的內容顯示出來。

【四、項目準備】

1、圖片：準備自己的喜歡的GIF靜態長圖，保存在文件夾。

2、軟件：Dreamweaver。

【五、項目實現】

1、創建div 存放圖片和文件，添加class屬性。

<body>
  <div class="box">
  <div class="box2">
  </div>  
  </div>
</body>

2、添加CSS樣式

1）設置box的寬、高、位置、背景顏色。

.box{
      width: 300px;
      height: 300px;
      background: #ccc;
      position: absolute;
      left: 0px;
      top: 0;
    }

2）加載圖片，設置寬、高，-webkit-animation動畫效果。

.box2{
        width: 156px;
        height: 156px;
        background: url("fox45.png");
         -webkit-animation:aa 3s steps(45) infinite ;
      }
   @-webkit-keyframes aa{
  
  
      100%{
     background-position: -7020px 0;
      }
     }

CSS3 animation屬性中的steps實現GIF動圖(逐幀動畫)

steps(45)表示讓整個動畫在45個關鍵幀之間切換。這個松鼠的圖片中

包含了45幀，所以這里設置了45。而且我們的動畫時長是3s，也就是說每一幀

停留1s，這就和普通的GIF動圖達到了一樣的效果。

【六、效果展示】

1、點擊F12運行到瀏覽器。

2、點擊圖片，效果如下。

【七、總結】

1、本項目，就gif圖遇到的一些難點進行了分析及提供解決方案。

2、html+css也可以做出網站頁面的效果，在上面顯示圖片標題的地方不能用絕對定位，于是用的relative定位，這個地方是布局的核心部分。

3、按照操作步驟，自己嘗試去做。自己實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

4、需要本文源碼的小伙伴，后臺回復“GIF圖”四個字，即可獲取。

****看完本文有收獲？請轉發分享給更多的人****

IT共享之家

入群請在微信后臺回復【入群】

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

、變形

CSS3變形是一些效果的集合

如平移、旋轉、縮放、傾斜效果

每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化

語法：transform:[transform-function] *;

變形函數

translate()：平移函數，基于X、Y坐標重新定位元素的位置

transform:translate(100px,0) x軸移動

transform:translate(0,100px) y軸移動

scale()：縮放函數，可以使任意元素對象尺寸發生變化

transform:scale(2,0) 設置X軸的縮放

transform:scale(0,2) 設置Y軸的縮放

rotate()：旋轉函數，取值是一個度數值

transform:rotate(30deg);

skew()：傾斜函數，取值是一個度數值

transform:skewX（ax）：表示只設置X軸的傾斜

transform:skewY（ay）：表示只設置Y軸的傾斜

注：rotate( )函數只是旋轉，而不會改變元素的形狀

skew( )函數是傾斜，元素不會旋轉，會改變元素的形狀

二、過度

transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等

CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡單動作觸發樣式平滑過渡

語法：transition:[transition-property transition-duration transition-timing-function transition-delay ]

過渡屬性（ transition-property ）

定義轉換動畫的CSS屬性名稱

IDENT：指定的CSS屬性（width、height、background-color屬性等）

all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會使用all

過渡所需的時間（ transition-duration ）

定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位為秒（s）

過渡動畫函數（ transition-timing-function ）

指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡添加一個函數來指定動畫的快慢方式

ease：速度由快到慢（默認值）

linear：速度恒速（勻速運動）

ease-in：速度越來越快（漸顯效果）

ease-out：速度越來越慢（漸隱效果）

ease-in-out：速度先加速再減速（漸顯漸隱效果）

過渡延遲時間（ transition-delay ）

指定一個動畫開始執行的時間，當改變元素屬性值后多長時間去執行過渡效果

正值：元素過渡效果不會立即觸發，當過了設置的時間值后才會被觸發

負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷

0：默認值，元素過渡效果立即執行

三、animation動畫簡介

animation實現動畫主要由兩個部分組成

通過類似Flash動畫的關鍵幀來聲明一個動畫

在animation屬性中調用關鍵幀聲明的動畫實現一個更為復雜的動畫效果

設置關鍵貞：

@keyframes spread {

0% {width:0;}

33% {width:23px;}

66% {width:46px;}

100% {width:69px;}

}

調用關鍵貞：

animation:animation-name animation–duration animation-timing-function

animation-delay animation-iteration-count animation-direction

animation-play-state animation-fill-mode;

動畫的使用過程：

動畫的播放次數（animation-iteration-count）

值通常為整數，默認值為1

特殊值infinite，表示動畫無限次播放

動畫的播放方向（animation-direction）

normal，動畫每次都是循環向前播放

alternate，動畫播放為偶數次則向前播放

動畫的播放狀態（animation-play-state）

running將暫停的動畫重新播放

paused將正在播放的元素動畫停下來

代碼展示：

<html>

<head>

</head>

<body>

</div>

</body>

</html>

margin: 0;

padding: 0;

}

/* 父div設置寬高 */

.box{

width: 80%;

height: 600px;

margin: 0px auto;

margin-top: 10px;

position: relative;

}

/* 所有的圖片設置 */

.box>img{

width: 300px;

height: 250px;

position: absolute;

border: 1px solid white;

box-shadow:5px 5px 5px rgba(0,0,0,.6);

border-radius: 20px;

}

/* 第一張圖片設置 */

.box>img:nth-of-type(1) {

right: 2;

top: 0px;

transform: rotate(48deg);

}

.box>img:nth-of-type(2){

left: 2px;

top: 10px;

transform: rotate(319deg);

}

.box>img:nth-of-type(3){

left: 500px;

top: 40px;

transform: rotate(278deg);

}

.box>img:nth-of-type(4){

left:250px;

top:40px;

transform: rotate(-50deg);

}

.box>img:nth-of-type(5){

top:300px;

transform: rotate(-80deg);

}

.box>img:nth-of-type(6){

left:700px;

top:300px;

transform: rotate(-260deg);

}

.box>img:nth-of-type(7){

left: 310px;

top: 300px;

transform: rotate(94deg);

}

.box>img:nth-of-type(8){

left: 460px;

top: 300px;

transform: rotate(205deg);

}

.box>img:nth-of-type(9){

left: 100px;

top: 210px;

transform: rotate(38deg);

}

.box>img:nth-of-type(10){

right:100px;

top:300px;

transform: rotate(-210deg);

}

.box>img:hover{

/* 圖片前置 */

z-index: 1;

/* 還原放大1.5倍 */

transform: rotate(360deg) scale(2);

transition:all 1s ease-in-out;

}

<!DOCTYPE html>

<head>

<title>QQ彩貝導航條</title>

</head>

<body>

<nav>

<h1>

</a>

</h1>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</section>

</nav>

</div>

</body>

</html>

margin: 0;

padding:0;

}

li{

list-style: none;

}

text-decoration: none;

color: #787690;

}

/* 整個導航 */

nav{

height: 100px;

width: 100%;

margin: 0 auto;

position: relative;

background: linear-gradient(to bottom, #FFFFFF, rgba(204, 204, 204, 0.4));

}

/* 導航Logo部分 */

.topleft{

padding-top: 30px;

padding-left: 110px;

}

/* 中間整體部分 */

.topMiddle{

position: absolute;

left: 400px;

bottom: 20px;

height: 50px;

}

/* 導航中間文字 */

.topMiddle>ul>li{

float: left;

margin-right: 20px;

padding-top: 20px;

}

.topMiddle>ul>li>a:hover{

color:yellow;

}

/* 導航中間文字部分第一個li */

.iconOne{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

left: 0;

top:0;

background: url('../htmlNine/img/header_03.png') 2px 1px no-repeat;

}/* 導航中間文字部分第三個li */

.iconTwo{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

top:0;

background: url('../htmlNine/img/header_07.png') 2px 1px no-repeat;

}

/* 調用關鍵貞 */

.topMiddle>ul>li:nth-child(1)>a:hover .iconOne{

background: url('../htmlNine/img/header_05.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* 調用關鍵貞 */

.topMiddle>ul>li:nth-child(3)>a:hover .iconTwo{

background: url('../htmlNine/img/header_09.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* topRight */

/* 登錄部分所有li */

.topRight{

position: absolute;

left: 1380px;

bottom: 55px;

height: 40px;

}

.topRight>ul>li{

height: 25px;

width: 30px;

}

/* 登錄部分三個圖標 */

.topRight>ul>li:nth-child(1){

position: absolute;

right: 100px;

top:45px;

background: url('../htmlNine/img/iconsB_13.png') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(2){

position: absolute;

right: 150px;

top:45px;

background: url('../htmlNine/img/iconsB_12.gif') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(3){

position: absolute;

right:200px;

top:45px;

background: url('../htmlNine/img/iconsB_11.gif') 2px 1px no-repeat;

}

.topRight>ul>li:hover{

/* 變形 */

transform: rotate(720deg) scale(2);

/* 過度 */

transition:all 0.6s ease-in-out ;

}

/* 動畫設置關鍵幀名稱identifier */

@keyframes identifier {

0%{width: 0;}

33%{width:23px;}

66%{width: 46px;}

100%{width: 69px;}

}

效果鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/duocaiqiang.html

file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/QQcaibeidaohang.html

在線咨詢

上一篇：Java實例：Vue前端與Java后端實現大文件異步
下一篇：9999元玩轉4K 明基超高清家用投影評測

您的項目需求

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

整合營銷服務商

CSS3 動畫庫-animation

您的項目需求