一、 動(dòng)畫(huà)
網(wǎng)頁(yè)動(dòng)畫(huà)可以通過(guò)以下幾種方式實(shí)現(xiàn)（gif、flash 除外），
css3 動(dòng)畫(huà)
SVG 動(dòng)畫(huà)
JS 動(dòng)畫(huà)（包括 css、SVG 的屬性修改實(shí)現(xiàn)的動(dòng)畫(huà)）

最早 JS 通過(guò) setTimeout() 或者 setInterval() 方法設(shè)置一個(gè)時(shí)間，
來(lái)控制幀與幀之間的時(shí)間間隔。

setTimeout() 直接用跳出來(lái)終止下一幀。
setInterval() 使用 clearInterval() 來(lái)取消周期執(zhí)行。
但是這樣效果可能不夠流暢，且會(huì)占用額外的資源。
后來(lái)，有了一個(gè)requestAnimationFrame()，讓瀏覽器決定最優(yōu)幀速率、選擇繪制下一幀的最佳時(shí)機(jī)。
requestAnimationFrame() 用 cancelAnimationFrame() 來(lái)結(jié)束。
css3 動(dòng)畫(huà)
能夠執(zhí)行補(bǔ)間狀態(tài)的條件是，屬性值能夠轉(zhuǎn)換成數(shù)值，這樣就能參與運(yùn)算。如：

顏色（color,background-color,border-color…）
長(zhǎng)度/大?。╳idth,height,font-size,border-width,border-radius…）
透明度（opacity）
堆疊順序（z-index）你吖補(bǔ)間它有毛用
而不能參與運(yùn)算就意味著不能拿來(lái)補(bǔ)間狀態(tài)，也就是沒(méi)有中間狀態(tài)，如：

position（absolute、fixed、relative…）
background-image（一個(gè)確定的 url）
…
一拍腦門(mén)就能想到，創(chuàng)建一個(gè)補(bǔ)間動(dòng)畫(huà)的條件有：

開(kāi)始狀態(tài)
結(jié)束狀態(tài)
執(zhí)行時(shí)間
補(bǔ)間效果
假如有個(gè)方塊，寬度從 10px 變成 100px。

開(kāi)始狀態(tài)呢，在原 css 里就可以定義了 width: 10px。

結(jié)束狀態(tài)呢，我們可以通過(guò)用 JS 直接修改 width 值，或者增加一個(gè) class 選擇器的方式，
或者是 :hover 等其他表示狀態(tài)的偽類(lèi)，讓 width: 100px。

而這時(shí)，你需要一個(gè)補(bǔ)間動(dòng)畫(huà)屬性來(lái)聲明 執(zhí)行時(shí)間 和 補(bǔ)間效果，
它就是 transition，中文譯作 過(guò)渡，就是我所說(shuō)的補(bǔ)間的意思。

transition 為以下屬性的簡(jiǎn)寫(xiě)

transition-property 規(guī)定哪個(gè)屬性應(yīng)用過(guò)渡
transition-duration 執(zhí)行時(shí)間
transition-timing-function 補(bǔ)間效果，默認(rèn)為 ease
transition-delay 延遲多少時(shí)間開(kāi)始
css3 還提供了一個(gè) animation 屬性來(lái)創(chuàng)建更豐富的自定義動(dòng)畫(huà)，而減少 JS 的介入。

比如：

你想一個(gè)動(dòng)畫(huà)中擁有多個(gè)狀態(tài)
每個(gè)狀態(tài)修改的屬性值較多
循環(huán)播放
逆向播放
可自動(dòng)開(kāi)始，可中途暫停
animation 和 @keyframes 配合使用。

@keyframes 用來(lái)定義動(dòng)畫(huà)，animation 則可以多處應(yīng)用，他們通過(guò)一個(gè) name 來(lái)連接彼此，
因此 @keyframes 必須要起個(gè)名字，而 animation 則有個(gè) animation-name。

animation 在應(yīng)用時(shí)，你可以自定義它：

animation-duration 執(zhí)行時(shí)間
animation-time-function 補(bǔ)間效果，默認(rèn)是 ease
animation-delay 延遲多少時(shí)間開(kāi)始
animation-iteration-count 循環(huán)播放次數(shù)
animation-direction 是否在下一周期逆向播放
animation-play-state 動(dòng)畫(huà)是否暫停，通過(guò)它，可以實(shí)現(xiàn)是否自動(dòng)播放。要中途暫停的話，就要修改值，通過(guò)偽類(lèi)或 JS 實(shí)現(xiàn)
animation-fill-mode 這個(gè)屬性倒是有點(diǎn)出乎意料之外，請(qǐng)自行研究使用場(chǎng)景
可見(jiàn) w3c 規(guī)范制定者們考慮到我們要用起來(lái)簡(jiǎn)單呢，基本上和我們思維方式一致。

實(shí)現(xiàn)動(dòng)畫(huà)的多個(gè)狀態(tài)是在 @keyframes 定義時(shí)完成的。

采用 0%~100% 的分割方式，我們就不用在 執(zhí)行時(shí)間 之外考慮時(shí)間問(wèn)題了。
SVG 動(dòng)畫(huà)
css3 動(dòng)畫(huà)屬性只管得住自己的 css 屬性，SVG 繪制的圖形，還得 SVG 自己解決。而對(duì)于 SVG 的 css 樣式，一般兩種皆可。

SVG 大大們的思維方式就有點(diǎn)繞了，竟然提供了 5 種動(dòng)畫(huà) 標(biāo)簽讓我選擇：

set 相當(dāng)于 animate 的 calcMode="discrete"，忽略
animate
animateColor 相當(dāng)于 animate 的 attributeName="color"，忽略
animateTransform
animateMotion
我們先來(lái)看看和 css3 最像的 animate 標(biāo)簽，擁有的屬性有

attributeName 規(guī)定哪個(gè)屬性應(yīng)用過(guò)渡
from 開(kāi)始狀態(tài)
to/by 結(jié)束狀態(tài)，至少出現(xiàn)一個(gè)
values 多個(gè)狀態(tài)時(shí)，忽略 from/to/by
begin 延遲多少時(shí)間開(kāi)始
dur 執(zhí)行時(shí)間
calcMode,keyTimes,keySplines 自定義補(bǔ)間效果
repeatCount,repeatDur 循環(huán)播放次數(shù)/持續(xù)時(shí)間
…
animateTransform 主要是為了 attributeName="transform"，
跟 css3 動(dòng)畫(huà)結(jié)合 transform 變換類(lèi)似，多了一個(gè) type="scale" 屬性用來(lái)區(qū)分相關(guān)參數(shù)。

animateMotion 是 SVG 甩 css3 動(dòng)畫(huà)一條街的強(qiáng)大技能，可以讓SVG各種圖形沿著特定的 path 路徑運(yùn)動(dòng)。

SVG 動(dòng)畫(huà)比 css 動(dòng)畫(huà)更強(qiáng)大，所以也更復(fù)雜。

細(xì)分成這 5 類(lèi)標(biāo)簽，大概是性能考慮，人工簡(jiǎn)單區(qū)分一下數(shù)值、顏色、變換，可以為計(jì)算機(jī)省去大量的無(wú)用運(yùn)算。

CSS3動(dòng)畫(huà)的實(shí)現(xiàn)
1.transform 變形
.div{
transform:translate(x,y);
}
.div{
transform:scale(x,y);//xy方向倍數(shù)
}
.div{
transform:rptate(-30deg);//角度
}
.div{
transform:skew(x,y);//xy方向傾斜角度
}

2.transition 過(guò)渡
transition: width 3s ease(快-慢-快)/linear(線性勻速)/ease in(慢-快)/ease out(快-慢)

3.animation 動(dòng)畫(huà)
@keyframes 自定義名稱(chēng){
from/to/百分百{
樣式屬性：樣式；
}
}

二、圓角

CSS3 使用border-radius屬性設(shè)置圓角效果

該屬性可以通過(guò)設(shè)置圖片或塊級(jí)元素四個(gè)角的圓角半徑像素?cái)?shù)來(lái)實(shí)現(xiàn)該效果。W3C規(guī)定該屬性的可能取值為：

none，默認(rèn)值，表示元素沒(méi)有圓角效果

length，由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)組成的長(zhǎng)度值

%，由百分比設(shè)置的圓角值

該屬性可以分別設(shè)置元素的四個(gè)圓角效果，采用下列格式來(lái)實(shí)現(xiàn)。

格式：border-radius: 左上角 右上角 右下角 左下角;

通常，四個(gè)方向的角半徑均采用length取值來(lái)實(shí)現(xiàn)，該取值必須為浮點(diǎn)數(shù)字和單位標(biāo)識(shí)共同組成。同時(shí)規(guī)定，該取值不得取負(fù)數(shù)。
例1：利用整數(shù)來(lái)實(shí)現(xiàn)圓角取值。

div{

width: 200px; height: 150px;

border: solid 1px #aaaaaa;

border-radius: 10px 5px 10px 5px;

background-color: #ff5857;

}

上述實(shí)例設(shè)置了一個(gè)div塊級(jí)元素，其寬度為200px，高度為150px。為了能夠看到其圓角效果，增加了顏色為#ff5857的背景顏色，并且添加了1px大小的邊框，其邊框?yàn)閷?shí)線，邊框顏色為#aaaaaa。最后設(shè)置其圓角效果，左上角和右下角均為10px，右上角和左下角均為5px。

三、圖片文字遮罩
1.給圖片動(dòng)態(tài)添加半透明遮罩

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style type="text/css">  
        .demo{  
            width:425px;  
            height:283px;  
            position: relative;  
            overflow:hidden;  
        }  
        demo img{  
        width:100%;  
        }  
        .demo i{  
            position:absolute;  
            top:0;  
            width:100%;  
            height:100%;  
            background-color: rgba(251,251,251,0);  
            transition: background-color 0.5s;  
        }  
        .demo:hover i{  
            background-color: rgba(251,251,251,0.3);  
        }  
    </style>  
</head>  
<body>  
<p class="demo">  
        <img src="2.jpg">  
        <i></i>  
</p>  
</body>  
</html>  

2.文字遮罩效果
html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="share.css">
</head>
<body>
<div class="dark"> <h1>IMAGES</h1> </div>
</body>
</html>

css代碼

.dark h1 {
    margin: 0;
    font-size: 18vw;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
    line-height: 2.5;
    color: #000000;
    background: #ffffff;
}
.dark {
    text-align: center;
    background-size: cover;
    background-image: url(timg3.jpg);
}
.dark h1 { mix-blend-mode: lighten; }