CSS3新特性（陰影、動畫、漸變、變形、偽元素等）

本文轉載自查看原文 2017-01-08 23:54 1515

CSS3在CSS2.1的基礎上新增加了許多屬性，這里選擇了較常用的一些功能與大家分享，幫助文檔中有很詳細的描述，可以在本文的示例中獲得幫助文檔。

一、陰影

1.1、文字陰影

text-shadow
<length>①：第1個長度值用來設置對象的陰影水平偏移值。可以為負值
<length>②：第2個長度值用來設置對象的陰影垂直偏移值。可以為負值
<length>③：如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<color>：設置對象的陰影的顏色。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .text{
                font: bold 100px/1.5 georgia, sans-serif;
                color: dodgerblue;
                text-shadow: 10px 10px 50px #000;
                /*text-shadow: 20px 30px 50px #000,-20px -30px 50px #f00;*/
            }
        </style>
    </head>
    <body>
        <div class="text">
            Shadow Text
        </div>
    </body>
</html>

運行效果：

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style>
            body {
                background: #000;
                color: #fff;
            }
            .neon{
                font: bold 100px/1.5 georgia, sans-serif;
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
            }
        </style>
        <div class="neon">
            Hello NEON Text
        </div>
    </body>
</html>

運行結果：

1.2、盒子陰影

box-shadow
<length>①：第1個長度值用來設置對象的陰影水平偏移值。可以為負值
<length>②：第2個長度值用來設置對象的陰影垂直偏移值。可以為負值
<length>③：如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<length>④：如果提供了第4個長度值則用來設置對象的陰影外延值。可以為負值
<color>：設置對象的陰影的顏色。
inset：設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .shadow1{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 10px 10px 30px 0 #1E90FF,-10px -10px 30px 0 #1E90FF;
            }
            .shadow2{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 0 0 30px 0 #1E90FF;
            }
        </style>
    </head>
    <body>
        <p>
        <img src="img/7.jpg" class="shadow2"/>
        </p>
    </body>
</html>

運行效果：

練習：

二、背景

2.1、背景圖像尺寸

background-size：指定對象的背景圖像的尺寸大小

background-size：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

<length>：用長度值指定背景圖像大小。不允許負值。
<percentage>：用百分比指定背景圖像大小。不允許負值。
auto：背景圖像的真實大小。
cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 500px;
                height: 300px;
                border: 10px solid rgba(0,0,255,.3);
                margin: 100px;
                
                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                /*background-size:100px 50px;*/
                /*background-size:contain;*/
            }
        </style>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>
</html>

運行結果：

2.2、背景圖像顯示的原點

background-origin：指定對象的背景圖像顯示的原點。

background-origin：<box> [ , <box> ]*
<box> = border-box | padding-box | content-box

padding-box：從padding區域（含padding）開始顯示背景圖像。
border-box：從border區域（含border）開始顯示背景圖像。
content-box：從content區域開始顯示背景圖像。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 400px;
                height: 200px;
                border: 20px solid rgba(0,0,255,.2);
                margin: 100px;
                padding: 20px;
                
                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                background-origin:padding-box;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>
</html>

border-box效果：

content-box效果：

padding-box效果：（默認）

三、偽元素

偽元素不是真的元素是通過CSS虛擬出的一個元素，CSS3的語法為了區分偽元素與偽類，使用“：：”表示，但是前期為了兼容“：”仍然可以使用。

3.1、before

在應用樣式的元素內的前部虛擬一個元素可以指定元素的內容與樣式。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                margin: 100px;
                width: 300px;
                height: 180px;
                border: 5px solid lightcoral;
            }
            a{
                color:blue;
                text-decoration: none;
            }
            
            #div1:before {
                content: '這是before偽元素的內容';
                display: block;
                color: white;
                background: lightgreen;
            }
            
            #link1:before {
                content: attr(href);
            }
            
            #link2:before {
                content: url(img/link.png);
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <hr />
        </div>

        <p>
            <a href="http://best.cnblogs.com" id="link1">博客園</a>
        </p>

        <p>
            <a href="http://best.cnblogs.com" id="link2">張果 - 博客園</a>
        </p>
    </body>

</html>

效果：

在上面的示例中偽元素可以當成一個正常的元素寫所有樣式，attr可以取出元素的屬性，img可以指定圖片。

3.2、after

after也是一個與before類似的偽元素，不同的是他的位置是在內部的尾部，示例如下：

View Code

運行效果：

注意：

a)、本質上並不支持偽元素的雙冒號(::)寫法，而是忽略掉了其中的一個冒號，仍以單冒號來解析，所以等同變相支持了E::after。
b)、不支持設置屬性position, float, list-style-*和一些display值，Firefox3.5開始取消這些限制。
c)、IE10在使用偽元素動畫有一個問題：
.test:hover {}
.test:hover::after { /* 這時animation和transition才生效 */ }需要使用一個空的:hover來激活

3.3、清除浮動

方法一：

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    *zoom:1;
}

方法二：

            .clearfix {
                *zoom: 1;
                /*在舊版本的IE瀏覽器縮放大小，觸發haslayout（類似BFC）*/
            }
            
            .clearfix:after {
                /*偽元素，在應用該元素后添加一個偽元素*/
                content: "";
                /*內容為空*/
                display: table;
                /*BFC，清除內部浮動*/
                clear: both;
                /*清除外部浮動*/
            }

四、圓角與邊框

圓角可能是我們最迫切需要的CSS3樣式了，在CSS2.1中想盡各種辦法都不算理想，實現方法如下：

4.1、border-radius 圓角

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

<length>：用長度值設置對象的圓角半徑長度。不允許負值
<percentage>：用百分比設置對象的圓角半徑長度。不允許負值

這里有兩部分，第一個角度是水平角度，第二個角度是垂直角度。

a)、提供2個參數，2個參數以“/”分隔，每個參數允許設置1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則默認等於第1個參數
b)、水平半徑：如果提供全部四個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。
c)、如果只提供一個參數，將用於全部的於四個角。
d)、如果提供兩個，第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)。
e)、如果提供三個，第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。
垂直半徑也遵循以上4點。對應的腳本特性為borderRadius。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-radius</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 180px;
                margin: 100px;
                padding: 10px;
                border: 5px solid lightgreen;
                
                /*border-radius: 20px;  4個角水平與垂直都為10px*/
                
                 /*border-radius: 30px 0 30px 0;  上右下左4個角*/
                
                /*border-radius: 190px; 4個角圓角是高寬一半*/
                
                border-radius: 165px 105px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        border-radius: 165px 105px;
        </div>
    </body>
</html>

效果：

4.2、邊框圖片border-image

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

<' border-image-source '>：設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。
<' border-image-slice '>：設置或檢索對象的邊框背景圖的分割方式。
<' border-image-width '>：設置或檢索對象的邊框厚度。
<' border-image-outset '>：設置或檢索對象的邊框背景圖的擴展。
<' border-image-repeat '>：設置或檢索對象的邊框圖像的平鋪方式。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-image</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 167px;
                margin: 100px;
                padding: 10px;
                border: 27px solid lightgreen;
                
                border-image: url(img/border.png);
                border-image-slice: 27;
            }
        </style>
    </head>
    <body>
        <div id="div1">
                border-image: url(img/border.png);<br/>
                border-image-slice: 27;<br />
        </div>
        
    </body>
</html>

效果：

五、變形 transform

CSS3中使用transform對元素進行變形，可以是2D的也可以是3D（效果）的，transform的參數有許多，多數是函數的形式，具體如下：

transform：none | <transform-function>+

2D Transform Functions：
matrix()：以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a,b,c,d,e,f]變換矩陣
translate()：指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0
translatex()：指定對象X軸（水平方向）的平移
translatey()：指定對象Y軸（垂直方向）的平移
rotate()：指定對象的2D rotation（2D旋轉），需先有 <' transform-origin '> 屬性的定義
scale()：指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認取第一個參數的值
scalex()：指定對象X軸的（水平方向）縮放
scaley()：指定對象Y軸的（垂直方向）縮放
skew()：指定對象skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0
skewx()：指定對象X軸的（水平方向）扭曲
skewy()：指定對象Y軸的（垂直方向）扭曲 3D Transform Functions：
matrix3d()：以一個4x4矩陣的形式指定一個3D變換
translate3d()：指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
translatez()：指定對象Z軸的平移
rotate3d()：指定對象的3D旋轉角度，其中前3個參數分別表示旋轉的方向x,y,z，第4個參數表示旋轉的角度，參數不允許省略
rotatex()：指定對象在x軸上的旋轉角度
rotatey()：指定對象在y軸上的旋轉角度
rotatez()：指定對象在z軸上的旋轉角度
scale3d()：指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
scalez()：指定對象的z軸縮放
perspective()：指定透視距離

5.1、rotate()2D旋轉

transform:rotate(<angle>)

angle是角度的意思，單位可以是：

deg 度（Degrees）
grad 梯度（Gradians）
rad 弧度（Radians）
turn 轉、圈（Turns）

示例：

View Code

效果：

5.2、設置原點 transform-origin

transform-origin用於設置變形時的原點，從5.1可以看出轉動時默認的原點在中心，這里使用該屬性修改原點位置。

transform-origin：水平（left | center | right）垂直（top | center | bottom）

示例：

View Code

效果：

一般情況下我們會在9個關鍵點轉動，也可以使用具體的數字指定一個特殊的位置。

5.3、平移 translate()

transform：translate(x,y) = translate(<translation-value>[,<translation-value>]?)，指定對象的 2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0 。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }
            
            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: translate(50%,-50px);
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>

</html>

效果：

可以使用該方法實現垂直居中，需要使用定位。

5.4、縮放 scale

transform:scale(x,y)

scale()：指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認取第一個參數的值

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }
            
            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: scale(0.5,1.5);  /*寬度縮小到1半，高度放大到1.5倍*/
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>

</html>

效果：

5.5、斜切扭曲skew

transform:skew(x,y)：指定對象skew transformation（斜切扭曲）。第一個參數對應X軸角度，第二個參數對應Y軸角度。如果第二個參數未提供，則默認值為0

示例：

x30度角時效果：

y30度角時效果：

x30度角，y30度角時的效果：

練習1：

只允許一個div，可以使用CSS3

練習2：

請實現如下效果，可以使用CSS3

View Code

六、漸變

在早期IE瀏覽中的濾鏡中就有漸變，Photoshop中也有漸變，可簡單的認為漸變就是顏色的平滑過度，CSS3的漸變語法如下：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

<angle>：用角度值指定漸變的方向（或角度）。
to left：設置漸變為從右到左。相當於: 270deg
to right：設置漸變從左到右。相當於: 90deg
to top：設置漸變從下到上。相當於: 0deg
to bottom：設置漸變從上到下。相當於: 180deg。這是默認值，等同於留空不寫。 <color-stop> 用於指定漸變的起止顏色：
<color>：指定顏色。
<length>：用長度值指定起止色位置。不允許負值
<percentage>：用百分比指定起止色位置。

漸變一般應用於需要指定顏色的地方。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>linear-gradient</title>
        <style>
            .box {
                height: 200px;
                width: 200px;
                float: left;
                margin: 20px;
            }
            #div1{
                background: linear-gradient(orange,navy);
                /*從上到下橙色到藍色漸變*/
            }
            #div2{
                background: linear-gradient(lightgreen,lightcoral 40%,lightblue);
                /*綠紅藍從上到下漸變，中間的40%表示紅出現的位置，如果不指定則均勻分配*/
            }
            
            #div3{
                background: linear-gradient(0deg,red 20%,yellow 50%,green 80%);
                /*0度角方向（從下向上）*/
            }
            
            #div4{
                background: linear-gradient(45deg,blue,pink);
                /*目標方向45度角方向*/
            }
            
            #div5{
                background: linear-gradient(to top left,#000,#fff);
                /*從右下到左上的漸變*/
            }
            span{
                font: 50px/50px "microsoft yahei";
                color: linear-gradient(to left,red,blue);
                /*前景色無效,背景有效*/
            }
        </style>
    </head>

    <body>
        <div class="box" id="div1">
        </div>
        <div class="box" id="div2">
        </div>
        <div class="box" id="div3">
        </div>
        <div class="box" id="div4">
        </div>
        <div class="box" id="div5">
        </div>
        <span>
            Hello Linear-Gradient
        </span>
    </body>
</html>

效果：

如果要考慮兼容IE瀏覽器，可以使用IE中特有的濾鏡。

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="orange", EndColorStr="navy");
/*老IE中的漸變*/

IE中常用的濾鏡：

View Code

七、透明

7.1、opacity

設置對象的不透明度。

opacity：<number>

<number>：使用浮點數指定對象的不透明度。值被約束在[0.0-1.0]范圍內，如果超過了這個范圍，其計算結果將截取到與之最相近的值。 0表示完全透明，1表示完全不透明。

示例：

            .box {
                height: 180px;
                width: 300px;
                float: left;
                margin: 20px;
                background: url(img/7.jpg);
            }
            #div1{
                opacity: 0.5;  /*設置半透明*/
                filter:alpha(opacity=50); /*兼容IE，使用濾鏡，0-100 */
                background: blue;
                height: 100px;
            }

        <div class="box">
            <div id="div1">
            </div>
        </div>

效果：

7.2、transparent與圖片透明

用來指定全透明色彩
transparent是全透明黑色(black)的速記法，即一個類似rgba(0,0,0,0)這樣的值。
在CSS1中，transparent被用來作為background-color的一個參數值，用於表示背景透明。
在CSS2中，border-color也開始接受transparent作為參數值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作為參數值。
在CSS3中，transparent被延伸到任何一個有color值的屬性上。

    color: transparent;
    border: 1px solid transparent;
    background: transparent;

常見互聯網圖片格式，壓縮格式：

gif：只255種顏色，透明，動畫效果

jpg：色彩豐富（65536），不透明，不支持動畫

png：色彩更加豐富，支持透明，不支持動畫

7.3、RGBA

RGBA是CSS3中新增用於設置顏色的方法，語法：

RGBA(R,G,B,A)
取值：
R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數 | 百分數
A： Alpha透明度。取值0 - 1之間。

此色彩模式與RGB相同，只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式實現透明度，可使用 IE 濾鏡處理，如：

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
background: rgba(0, 0, 0, 0.5);

示例：

            #div3 {
                /*兼容IE，使用濾鏡，0-100 */
                filter: alpha(opacity=50);
                background: blue;
                background: rgba(0,0,255,.5);
                height: 100px;
            }

        <div class="box">
            <div id="div3">
            </div>
        </div>

效果：

代碼：

View Code

作業：

請完成如下效果，要求兼容IE8：

八、動畫

前端可以使用javascript實現一些簡單的動畫，但是有很大局限；jQuery解決了部分問題，對於一些小的動畫jQuery表示不錯，但復雜的過渡效果也無能為力；CSS3中引入了2種動畫效果表現不錯，分別是過渡動畫與幀動畫。

8.1、過渡動畫

過渡動畫可簡單理解為是從一個狀態過渡到另一個狀態間自動生成的動畫效果，相對簡單。

transition語法：

transition：<single-transition>[,<single-transition>]*
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

<' transition-property '>：檢索或設置對象中的參與過渡的屬性
<' transition-duration '>：檢索或設置對象過渡的持續時間
<' transition-timing-function '>：檢索或設置對象中過渡的動畫類型
<' transition-delay '>：檢索或設置對象延遲過渡的時間

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>動畫</title>
        <style>
            body {
                padding: 100px;
            }
            
            #img1 {
                /*所有過渡動畫的時間都為1秒*/
                transition: all 1s;
            }
            
            #img1:hover {
                transform: rotate(360deg);
            }
            
            #img2 {
                /*當動畫針對width時時間為0.5秒，高度為2秒*/
                transition: width 0.5s, height 2s ease-in;
            }
            
            #img2:hover {
                width: 100px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <img src="img/7.jpg" id="img1" />
        <img src="img/7.jpg" id="img2" width="300" height="200" />
    </body>

</html>

效果：

過度動畫基本可以針對元素的種屬性為尺寸、透明度、顏色等。

8.2、幀動畫

也稱為補間動畫，過度動畫中的效果是根據原始狀態與目標狀態生成的，如果需要控制中間過程則可以使用幀動畫。

幀動畫需要先定義再使用，使用@keyframes定義，animation調用定義好的動畫。

@keyframes語法：

@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

<identifier>： identifier定義一個動畫名稱

<keyframes-blocks>：定義動畫在每個階段的樣式，即幀動畫。

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

animation語法：
animation：<single-animation>[,<single-animation>]*
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

animation-name ：檢索或設置對象所應用的動畫名稱
animation-duration：檢索或設置對象動畫的持續時間
animation-timing-function：檢索或設置對象動畫的過渡類型
animation-delay：檢索或設置對象動畫延遲的時間
animation-iteration-count '>：檢索或設置對象動畫的循環次數
animation-direction：檢索或設置對象動畫在循環中是否反向運動
animation-fill-mode：檢索或設置對象動畫時間之外的狀態
animation-play-state：檢索或設置對象動畫的狀態。w3c正考慮是否將該屬性移除，因為動畫的狀態可以通過其它的方式實現，比如重設樣式

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>動畫</title>
        <style>
            /*定義動畫 名稱為animate1*/
            @keyframes animate1 {
                /*第一幀樣式*/
                from {
                    margin-left: 100%;
                    background: orangered;
                }
                /*動畫執行到30%時樣式*/
                30% {
                    background: lightblue;
                    width: 200px;
                    height: 200px;
                    border-radius: 100px;
                }
                /*動畫執行到60%時樣式*/
                60% {
                    background: lightgreen;
                    width: 300px;
                    height: 300px;
                    border-radius: 150px;
                }
                /*結束時樣式*/
                to {
                    margin-left: 0;
                }
            }
            #div1 {
                width: 100px;
                height: 100px;
                border-radius: 50px;
                background: lightcoral;
                /*調用定義的動畫，infinite無限制執行，linear動畫函數線性動畫*/
                animation: animate1 2s infinite linear;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        </div>
    </body>
</html>

效果：

infinite表示動畫一直執行，如果只想執行一次，可以刪除該關鍵字。雖然多數動畫使用CSS3可以完成，但是動畫非常耗資源，特別是在移動端，不建議多用。更加復雜的動畫可以使用Canvas。

練習與測試：

View Code

源碼：https://github.com/zhangguo5/CSS3_6.git

文章轉自：http://www.cnblogs.com/best/p/6143522.html。個人感覺很實用，一些新屬性太多，有時候難免會記不住，這篇文章里面講的很清楚，想不起來的時候可以翻翻筆記！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3新特性總結(偽類) CSS3偽類和偽元素的特性和區別 css3中變形與動畫（二） css3中變形與動畫（三） CSS3有哪些新特性？ CSS3有哪些新特性？ css3的偽（偽類和偽元素）大合集用CSS3實現帶有陰影效果和顏色漸變的按鈕 CSS3的變形transform、過渡transition、動畫animation學習 CSS3 動畫：使元素從一種樣式逐漸變化為另一種樣式的效果

CSS3新特性（陰影、動畫、漸變、變形、偽元素等）

CSS3與頁面布局學習總結（六）——CSS3新特性（陰影、動畫、漸變、變形、偽元素等）

一、陰影

1.1、文字陰影

1.2、盒子陰影

二、背景

2.1、背景圖像尺寸

2.2、背景圖像顯示的原點

三、偽元素

3.1、before

3.2、after

3.3、清除浮動

四、圓角與邊框

4.1、border-radius 圓角

4.2、邊框圖片border-image

五、變形 transform

5.1、rotate()2D旋轉

5.2、設置原點 transform-origin

5.3、平移 translate()

5.4、縮放 scale

5.5、斜切扭曲skew

六、漸變

七、透明

7.1、opacity

7.2、transparent與圖片透明

7.3、RGBA

八、動畫

8.1、過渡動畫

8.2、幀動畫

免責聲明！