當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

CSS3新特性（阴影、动画、渐变）

發(fā)布時間：2023/12/29 综合教程 26 生活家

生活随笔收集整理的這篇文章主要介紹了 CSS3新特性（阴影、动画、渐变）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、陰影

1、1文字陰影：

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

示例代碼：

<!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>
        <style type="text/css">
             .text{
                font: bold 100px/1.5 georgia, sans-serif;
                background: #000000;
                width: 600px;
                text-align: center;
                color: white;
                text-shadow: 10px 20px 50px darkmagenta,-10px -20px 50px darkviolet;
            }
        </style>
    </head>
    <body>
        <div class="text">
            Hello CSS3
        </div>
    </body>
</html>

View Code

1.2、盒子陰影

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

示例代碼：

<!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：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內(nèi)。

示例代碼：

<!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>

運行結(jié)果：

2.2、背景圖像顯示的原點

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

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

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

示例代碼：

<!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的語法為了區(qū)分偽元素與偽類，使用“：：”表示，但是前期為了兼容“：”仍然可以使用。

3.1、before

在應(yīng)用樣式的元素內(nèi)的前部虛擬一個元素可以指定元素的內(nèi)容與樣式。

偽元素可以當(dāng)成一個正常的元素寫所有樣式，attr可以取出元素的屬性，img可以指定圖片。

3.2、after

after也是一個與before類似的偽元素，不同的是他的位置是在內(nèi)部的尾部.

注意：

a)、本質(zhì)上并不支持偽元素的雙冒號(::)寫法，而是忽略掉了其中的一個冒號，仍以單冒號來解析，所以等同變相支持了E::after。
b)、不支持設(shè)置屬性position, float, list-style-*和一些display值，F(xiàn)irefox3.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瀏覽器縮放大小，觸發(fā)haslayout（類似BFC）*/
            }
            
            .clearfix:after {
                /*偽元素，在應(yīng)用該元素后添加一個偽元素*/
                content: "";
                /*內(nèi)容為空*/
                display: table;
                /*BFC，清除內(nèi)部浮動*/
                clear: both;
                /*清除外部浮動*/
            }

四、圓角與邊框

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

4.1、border-radius 圓角

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

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

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

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

View Code

效果：

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

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-image</title>
        <style type="text/css">
            .div1{
                width: 328px;
                height:220px;
                margin: 100px;
                padding: 10px;
                border: 27px solid;
                border-image: url(../img/border.png);
                border-image-slice: 27;/*圖片為81X81的規(guī)格，橫豎都是三個正方格，所以每個方格的對角線長為27*/
                border-image-repeat: repeat;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            border-image:url(img/border.png);
        </div>
    </body>
</html>

效果：

五、變形 transform

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

transform：none | <transform-function>+

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

5.1、rotate()2D旋轉(zhuǎn)

transform:rotate(<angle>)

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

deg 度（Degrees）
grad 梯度（Gradians）
rad 弧度（Radians）
turn 轉(zhuǎn)、圈（Turns）

示例：

<!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;
            }
            
            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: rotate(45deg);
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
        transform: rotate(45deg);
    </body>

</html>

View Code

效果：

5.2、設(shè)置原點 transform-origin

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

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

示例：

<!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: rotate(30deg);
                transform-origin: left top;
                /*旋轉(zhuǎn)的原點為左上角*/
            }
        </style>
    </head>

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

</html>

View Code

效果：

一般情況下我們會在9個關(guān)鍵點轉(zhuǎn)動，也可以使用具體的數(shù)字指定一個特殊的位置。

5.3、平移 translate()

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

View Code

效果：

可以使用該方法實現(xiàn)垂直居中，需要使用定位。

5.4、縮放 scale

transform:scale(x,y)

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

示例：

<!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>

View Code

效果：

5.5、斜切扭曲skew

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

示例：

x30度角時效果：

y30度角時效果：

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

百度招聘題：

只用一個div

實現(xiàn)代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #demo{
                width: 100px;
                height: 100px;
                border: 2px solid #000;
                position: relative;
                border-radius: 3px;
            }
            #demo:before{
                content: "";
                width: 14px;
                height: 14px;
                border-top: 2px solid #000;
                border-right: 2px solid #000;
                border-radius: 0 3px 0 0;
                position: absolute;
                right: -10px;
                top: 20px;
                transform: rotate(45deg);
                background: white;
            }
        </style>
    </head>
    <body>
        <div id="demo"></div>
    </body>
</html>

題二：

實現(xiàn)代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 500px;
                height: 200px;
                background: lightgreen;
                font: 50px/200px "microsoft yahei";
                text-align: center;
                text-shadow: 0 1px 1px #FFFFFF;
                margin: 0 auto;
                position: relative;
            }
            .box:before{
                content: " ";
                position: absolute;
                width: 50%;
                height: 20%;
                background: white;
                bottom: 5px;
                left: 8px;
                box-shadow: 0 10px 15px gray;
                transform: rotate(-2deg);
                z-index: -1;
            }
            .box:after{
                content: " ";
                position: absolute;
                width: 50%;
                height: 20%;
                background: white;
                bottom: 5px;
                right: 8px;
                box-shadow: 0 10px 15px gray;
                transform: rotate(2deg);
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div class="box">
            Transform CSS3
        </div>
    </body>
</html>

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：設(shè)置漸變?yōu)閺挠业阶蟆Ｏ喈?dāng)于: 270deg
to right：設(shè)置漸變從左到右。相當(dāng)于: 90deg
to top：設(shè)置漸變從下到上。相當(dāng)于: 0deg
to bottom：設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認值，等同于留空不寫。 <color-stop> 用于指定漸變的起止顏色：
<color>：指定顏色。
<length>：用長度值指定起止色位置。不允許負值
<percentage>：用百分比指定起止色位置。

漸變一般應(yīng)用于需要指定顏色的地方。

示例：

<!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%表示紅出現(xiàn)的位置，如果不指定則均勻分配*/
            }
            
            #div3{
                background: linear-gradient(0deg,red 20%,yellow 50%,green 80%);
                /*0度角方向（從下向上）*/
            }
            
            #div4{
                background: linear-gradient(45deg,blue,pink);
                /*目標(biāo)方向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>

View Code

效果：

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

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

IE中常用的濾鏡：

透明效果：filter:alpha(opacity=50);

黑白照片：filter: gray;

X光照片：filter: Xray;

風(fēng)動模糊：filter: blur(add=true,direction=45,strength=30);

正弦波紋：filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

半透明效果：filter: Alpha(Opacity=50);

線型透明：filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);

放射透明：filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);

白色透明：filter: Chroma(Color=#FFFFFF);

降低色彩：filter: grays;

底片效果：filter: invert;

左右翻轉(zhuǎn)：filter: fliph;

垂直翻轉(zhuǎn)：filter: flipv;

投影效果：filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);

馬賽克：filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

發(fā)光效果：filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);

柔邊效果：filter:alpha(opacity=100, finishOpacity=0,style=2;

許多 Filter 中的特效均已進入了 CSS3 草案，并在新版的非 IE 瀏覽器中得到了很好的支持。

View Code

七、透明

7.1、opacity

設(shè)置對象的不透明度。

opacity：<number>

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

示例：

 .box {
                height: 180px;
                 300px;
                float: left;
                margin: 20px;
                background: url(img/7.jpg);
            }
            #div1{
                opacity: 0.5;  /*設(shè)置半透明*/
                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的一個參數(shù)值，用于表示背景透明。
在CSS2中，border-color也開始接受transparent作為參數(shù)值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作為參數(shù)值。
在CSS3中，transparent被延伸到任何一個有color值的屬性上。

常見互聯(lián)網(wǎng)圖片格式，壓縮格式：

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

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

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

7.3、RGBA

RGBA是CSS3中新增用于設(shè)置顏色的方法，語法：

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

此色彩模式與RGB相同，只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式實現(xiàn)透明度，可使用 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>

效果：

八、動畫

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

8.1、過渡動畫

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

transition語法：

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

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

示例：

<!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 {
                /*當(dāng)動畫針對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、幀動畫

也稱為補間動畫，過度動畫中的效果是根據(jù)原始狀態(tài)與目標(biāo)狀態(tài)生成的，如果需要控制中間過程則可以使用幀動畫。

幀動畫需要先定義再使用，使用@keyframes定義，animation調(diào)用定義好的動畫。

@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 ：檢索或設(shè)置對象所應(yīng)用的動畫名稱
animation-duration：檢索或設(shè)置對象動畫的持續(xù)時間
animation-timing-function：檢索或設(shè)置對象動畫的過渡類型
animation-delay：檢索或設(shè)置對象動畫延遲的時間
animation-iteration-count '>：檢索或設(shè)置對象動畫的循環(huán)次數(shù)
animation-direction：檢索或設(shè)置對象動畫在循環(huán)中是否反向運動
animation-fill-mode：檢索或設(shè)置對象動畫時間之外的狀態(tài)
animation-play-state：檢索或設(shè)置對象動畫的狀態(tài)。w3c正考慮是否將該屬性移除，因為動畫的狀態(tài)可以通過其它的方式實現(xiàn)，比如重設(shè)樣式

示例：

<!DOCTYPE html>
<html>

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

效果：

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

總結(jié)

以上是生活随笔為你收集整理的CSS3新特性（阴影、动画、渐变）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：激活 iPhone 时修改 Apple
下一篇：软件测试系列——性能指标