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

時間 2019-11-19

標籤 css3 css 頁面佈局學習總結特性陰影動畫漸變變形元素欄目 CSS 简体版

原文原文鏈接

CSS3在CSS2.1的基礎上新增長了許多屬性，這裏選擇了較經常使用的一些功能與你們分享，幫助文檔中有很詳細的描述，能夠在本文的示例中得到幫助文檔。javascript

1、陰影

1.一、文字陰影

text-shadow
<length>①：第1個長度值用來設置對象的陰影水平偏移值。能夠爲負值
<length>②：第2個長度值用來設置對象的陰影垂直偏移值。能夠爲負值
<length>③：若是提供了第3個長度值則用來設置對象的陰影模糊值。不容許負值
<color>：設置對象的陰影的顏色。css

示例代碼：html

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

運行效果：前端

示例代碼：java

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

運行結果：css3

1.二、盒子陰影

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

示例代碼：github

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

運行效果：瀏覽器

練習：app

2、背景

2.一、背景圖像尺寸

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.二、背景圖像顯示的原點

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效果：（默認）

3、僞元素

僞元素不是真的元素是經過CSS虛擬出的一個元素，CSS3的語法爲了區分僞元素與僞類，使用「：：」表示，可是前期爲了兼容「：」仍然可使用。

3.一、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.二、after

after也是一個與before相似的僞元素，不一樣的是他的位置是在內部的尾部，示例以下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 180px;
                border: 5px solid lightcoral;
            }
            a{
                color:blue;
                text-decoration: none;
            }
            
            #div1:after {
                content: '這是before僞元素的內容';
                display: block;
                color: white;
                background: lightgreen;
            }
            
            #link1:after {
                content: attr(href);
            }
            
            #link2:after {
                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>

View Code

運行效果：

注意：

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

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;
                /*清除外部浮動*/
            }

4、圓角與邊框

圓角多是咱們最迫切須要的CSS3樣式了，在CSS2.1中想盡各類辦法都不算理想，實現方法以下：

4.一、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>

效果：

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-radius 圓角</title>
        <style type="text/css">
            #div1{
                width: 300px;
                height:300px;
                margin: 100px;
                background: #0066CC;
                
                border-radius: 150px 100px 10px 100px/60px 100px 90px 100px;
            }
        </style>
    </head>
    <body>
        <h2>border-radius 圓角</h2>
        
        
        <div id="div1"></div>
    </body>
</html>

結果：

4.二、邊框圖片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 '>：設置或檢索對象的邊框圖像的平鋪方式。

圖片剪裁位置(border-image-slice)
一、沒有單位，專指像素。這相似於flash的as腳本，舞臺高寬，影片剪輯大小，位移直接就是一個數值，沒有單位，由於默認單位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;這裏的27專指27像素。

二、支持百分比值，百分比值大小事相對於邊框圖片而言，假設邊框圖片大小爲400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。

重複性(border-image-repeat)
這裏的重複性有別於background的背景重複，差異較大。background圖片就是重複，不重複，水平重複，垂直重複，總之就是圍繞repeat（重複）這個詞打轉，一家獨大。而對於border-image，可謂是三足鼎立，repeat（重複）只是其中之一，其他兩個是round（平鋪）和stretch（拉伸）。其中，stretch是默認值。

參數0~2個，0則使用默認值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同於border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數；2個參數的話則第一個參數表水平方向，第二個參數表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同於border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重複），至於何爲平鋪何爲重複下面會深刻講解。

詳解：http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/

示例：

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

效果：

5、變形 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.一、rotate()2D旋轉

transform:rotate(<angle>)

angle是角度的意思，單位能夠是：

deg 度（Degrees）
grad 梯度（Gradians）
rad 弧度（Radians）
turn 轉、圈（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.二、設置原點 transform-origin

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

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;
                /*旋轉的原點爲左上角*/
            }
        </style>
    </head>

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

</html>

View Code

效果：

通常狀況下咱們會在9個關鍵點轉動，也可使用具體的數字指定一個特殊的位置。

5.三、平移 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.四、縮放 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.五、斜切扭曲skew

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

示例：

x30度角時效果：

y30度角時效果：

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

練習1：

只容許一個div，可使用CSS3

練習2：

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

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 200px;
                background: lightblue;
                font: 43px/200px "microsoft yahei";
                color: darkblue;
                text-align: center;
                margin: 0 auto;
                text-shadow: 0 1px 1px #fff;
                position: relative;
            }
            
            .box:before,
            .box:after {
                content: ' ';
                position: absolute;
                bottom: 10px;
                left: 5px;
                width: 50%;
                height: 20%;
                box-shadow: 0 10px 20px #ccc;
                transform: rotate(-3deg);
                z-index: -1;
            }
            
            .box:after {
                left: auto;
                right: 5px;
                transform: rotate(3deg);
            }
        </style>
    </head>

    <body>
        <div class="box">
            Hello World By CSS3
        </div>
    </body>

</html>

View Code

6、漸變

在早期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(startColorstr='#ff0000', endColorstr='#0000ff', grandientType=1);
/** IE7 **/
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', grandientType=1);
/** IE8 **/

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

IE中經常使用的濾鏡：

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

黑白照片：filter: gray;

X光照片：filter: Xray;

風動模糊：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;

左右翻轉：filter: fliph;

垂直翻轉：filter: flipv;

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

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

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

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

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

View Code

7、透明

7.一、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.二、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.三、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>

效果：

代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>linear-gradient</title>
        <style>
            .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;
            }
            
            #div2 {
                background: url(img/border.png);
                height: 160px;
                width: 280px;
                border: 10px solid transparent;
                background-origin: content-box;
            }
            
            #div3 {
                /*兼容IE，使用濾鏡，0-100 */
                filter: alpha(opacity=50);
                background: blue;
                background: rgba(0,0,255,.5);
                height: 100px;
            }
            
            #div4 {}
            
            #div5 {}
        </style>
    </head>

    <body>
        <div class="box">
            <div id="div1">
            </div>
        </div>
        <div class="box">
            <div id="div2">
            </div>
        </div>
        <div class="box">
            <div id="div3">
            </div>
        </div>
        <div class="box" id="div4">
        </div>
        <div class="box" id="div5">
        </div>
    </body>

</html>

View Code

結果：

做業：

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

8、動畫

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

8.一、過渡動畫

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

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.二、幀動畫

也稱爲補間動畫，過分動畫中的效果是根據原始狀態與目標狀態生成的，若是須要控制中間過程則可使用幀動畫。

幀動畫須要先定義再使用，使用@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。

練習與測試：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>練習</title>
        <style type="text/css">
            #div1 {
                position: relative;
                font-size: 50px;
                text-shadow: 5px 5px 15px black;
                transition: all 1s;
            }
            @keyframes aaa{
                from{
                background: linear-gradient(to top left,red,green,blue);
                    
                }
                33%{
                background: linear-gradient(to top left,blue,red,green);
                    
                }
                66%{
                background: linear-gradient(to top left,green,blue,red);
                    
                }
                to{
                background: linear-gradient(to top left,red,green,blue);
                    
                }
            }
            #div1:before {
                position: absolute;
                content: " ";
                width: 50px;
                height: 50px;
                background: red;
                display: inline-block;
                transform: rotate(-30deg) translate(100%, 100%);
                left:280px;
                z-index: 100;
                opacity: .5;
                filter:alpha(opacity=50);
            }
            
            #div1:after {
                content: "Hello World";
                font-size: 50px;
                text-shadow: 5px 5px 15px black;
            }
            #div1:hover{
                transform: rotate(180deg);
            }
            #img1 {
                width: 400px;
                height: 300px;
                box-shadow: 5px 5px 10px lightblue;
                border-radius: 200px/150px;
            }
            
            #div2 {
                width: 300px;
                height: 200px;
                float: left;
                border: 2px solid lightcoral;
                background: url(img/3.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            
            #div3 {
                width: 300px;
                height: 200px;
                float: left;
                border: 2px solid lightseagreen;
                background: linear-gradient(to top left,red,green,blue);
                animation: aaa 2s infinite linear;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            Hello World!
            <img src="img/3.jpg" id="img1" width="300" height="300" />
        </div>
        <div id="div2">
        </div>
        <div id="div3">
        </div>
    </body>
</html>