當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...

發(fā)布時(shí)間：2023/11/29 CSS 87 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）... 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、陰影

1.1、文字陰影

text-shadow
<length>①：第1個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影水平偏移值?？梢詾樨?fù)值
<length>②：第2個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影垂直偏移值。可以為負(fù)值
<length>③：如果提供了第3個(gè)長(zhǎng)度值則用來(lái)設(shè)置對(duì)象的陰影模糊值。不允許負(fù)值
<color>：設(shè)置對(duì)象的陰影的顏色。

示例代碼：

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

運(yùn)行效果：

示例代碼：

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

運(yùn)行結(jié)果：

1.2、盒子陰影

box-shadow
<length>①：第1個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影水平偏移值?？梢詾樨?fù)值
<length>②：第2個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影垂直偏移值?？梢詾樨?fù)值
<length>③：如果提供了第3個(gè)長(zhǎng)度值則用來(lái)設(shè)置對(duì)象的陰影模糊值。不允許負(fù)值
<length>④：如果提供了第4個(gè)長(zhǎng)度值則用來(lái)設(shè)置對(duì)象的陰影外延值。可以為負(fù)值
<color>：設(shè)置對(duì)象的陰影的顏色。
inset：設(shè)置對(duì)象的陰影類(lèi)型為內(nèi)陰影。該值為空時(shí)，則對(duì)象的陰影類(lè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>

運(yùn)行效果：

練習(xí)：

二、背景

2.1、背景圖像尺寸

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

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

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

<length>：用長(zhǎng)度值指定背景圖像大小。不允許負(fù)值。
<percentage>：用百分比指定背景圖像大小。不允許負(fù)值。
auto：背景圖像的真實(shí)大小。
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>

運(yùn)行結(jié)果：

2.2、背景圖像顯示的原點(diǎn)

background-origin：指定對(duì)象的背景圖像顯示的原點(diǎn)。

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

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

示例代碼：

<!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效果：（默認(rèn)）

三、偽元素

偽元素不是真的元素是通過(guò)CSS虛擬出的一個(gè)元素，CSS3的語(yǔ)法為了區(qū)分偽元素與偽類(lèi)，使用“：：”表示，但是前期為了兼容“：”仍然可以使用。

3.1、before

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

示例：

<!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偽元素的內(nèi)容';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>

效果：

在上面的示例中偽元素可以當(dāng)成一個(gè)正常的元素寫(xiě)所有樣式，attr可以取出元素的屬性，img可以指定圖片。

3.2、after

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

<!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偽元素的內(nèi)容';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

運(yùn)行效果：

?注意：

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

3.3、清除浮動(dòng)

方法一：

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

方法二：

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

四、圓角與邊框

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

4.1、border-radius 圓角

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

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

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

a)、提供2個(gè)參數(shù)，2個(gè)參數(shù)以“/”分隔，每個(gè)參數(shù)允許設(shè)置1~4個(gè)參數(shù)值，第1個(gè)參數(shù)表示水平半徑，第2個(gè)參數(shù)表示垂直半徑，如第2個(gè)參數(shù)省略，則默認(rèn)等于第1個(gè)參數(shù)
b)、水平半徑：如果提供全部四個(gè)參數(shù)值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用于四個(gè)角。
c)、如果只提供一個(gè)參數(shù)，將用于全部的于四個(gè)角。
d)、如果提供兩個(gè)，第一個(gè)用于上左(top-left)、下右(bottom-right)，第二個(gè)用于上右(top-right)、下左(bottom-left)。
e)、如果提供三個(gè)，第一個(gè)用于上左(top-left)，第二個(gè)用于上右(top-right)、下左(bottom-left)，第三個(gè)用于下右(bottom-right)。
垂直半徑也遵循以上4點(diǎn)。對(duì)應(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個(gè)角水平與垂直都為10px*//*border-radius: 30px 0 30px 0; 上右下左4個(gè)角*//*border-radius: 190px; 4個(gè)角圓角是高寬一半*/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 '>：設(shè)置或檢索對(duì)象的邊框是否用圖像定義樣式或圖像來(lái)源路徑。
<' border-image-slice '>：設(shè)置或檢索對(duì)象的邊框背景圖的分割方式。
<' border-image-width '>：設(shè)置或檢索對(duì)象的邊框厚度。
<' border-image-outset '>：設(shè)置或檢索對(duì)象的邊框背景圖的擴(kuò)展。
<' border-image-repeat '>：設(shè)置或檢索對(duì)象的邊框圖像的平鋪方式。

示例：

<!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對(duì)元素進(jìn)行變形，可以是2D的也可以是3D（效果）的，transform的參數(shù)有許多，多數(shù)是函數(shù)的形式，具體如下：

transform：none | <transform-function>+

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

transform-origin用于設(shè)置變形時(shí)的原點(diǎn)，從5.1可以看出轉(zhuǎn)動(dòng)時(shí)默認(rèn)的原點(diǎn)在中心，這里使用該屬性修改原點(diǎ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)的原點(diǎn)為左上角*/}</style></head><body><div class="box-wrapper"><div class="box"></div></div></body></html> View Code

效果：

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

5.3、平移 translate()?

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

效果：

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

5.4、縮放 scale

transform:scale(x,y)

scale()：指定對(duì)象的2D scale（2D縮放）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則默認(rèn)取第一個(gè)參數(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>

效果：

5.5、斜切扭曲skew?

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

示例：

x30度角時(shí)效果：

y30度角時(shí)效果：

x30度角，y30度角時(shí)的效果：

練習(xí)1：

只允許一個(gè)div，可以使用CSS3

練習(xí)2：

請(qǐng)實(shí)現(xiàn)如下效果，可以使用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

六、漸變

在早期IE瀏覽中的濾鏡中就有漸變，Photoshop中也有漸變，可簡(jiǎn)單的認(rèn)為漸變就是顏色的平滑過(guò)度，CSS3的漸變語(yǔ)法如下：

<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。這是默認(rèn)值，等同于留空不寫(xiě)。 <color-stop> 用于指定漸變的起止顏色：
<color>：指定顏色。
<length>：用長(zhǎng)度值指定起止色位置。不允許負(fù)值
<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);/*從上到下橙色到藍(lán)色漸變*/}#div2{background: linear-gradient(lightgreen,lightcoral 40%,lightblue);/*綠紅藍(lán)從上到下漸變，中間的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);/*前景色無(wú)效,背景有效*/}</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中常用的濾鏡：

透明效果：filter:alpha(opacity=50);黑白照片：filter: gray;X光照片：filter: Xray;風(fēng)動(dò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 中的特效均已進(jìn)入了 CSS3 草案，并在新版的非 IE 瀏覽器中得到了很好的支持。 View Code

七、透明

7.1、opacity

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

opacity：<number>

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

示例：

.box {height: 180px;width: 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與圖片透明

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

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

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

gif：只255種顏色，透明，動(dòng)畫(huà)效果

jpg：色彩豐富（65536），不透明，不支持動(dòng)畫(huà)

png：色彩更加豐富，支持透明，不支持動(dòng)畫(huà)

7.3、RGBA

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

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

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

效果：

代碼：

<!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;/*設(shè)置半透明*/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

作業(yè)：

請(qǐng)完成如下效果，要求兼容IE8：

八、動(dòng)畫(huà)

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

8.1、過(guò)渡動(dòng)畫(huà)

過(guò)渡動(dòng)畫(huà)可簡(jiǎn)單理解為是從一個(gè)狀態(tài)過(guò)渡到另一個(gè)狀態(tài)間自動(dòng)生成的動(dòng)畫(huà)效果，相對(duì)簡(jiǎn)單。

transition語(yǔ)法：

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

<' transition-property '>：檢索或設(shè)置對(duì)象中的參與過(guò)渡的屬性
<' transition-duration '>：檢索或設(shè)置對(duì)象過(guò)渡的持續(xù)時(shí)間
<' transition-timing-function '>：檢索或設(shè)置對(duì)象中過(guò)渡的動(dòng)畫(huà)類(lèi)型
<' transition-delay '>：檢索或設(shè)置對(duì)象延遲過(guò)渡的時(shí)間

示例：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>動(dòng)畫(huà)</title><style>body {padding: 100px;}#img1 {/*所有過(guò)渡動(dòng)畫(huà)的時(shí)間都為1秒*/transition: all 1s;}#img1:hover {transform: rotate(360deg);}#img2 {/*當(dāng)動(dòng)畫(huà)針對(duì)width時(shí)時(shí)間為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>

效果：

過(guò)度動(dòng)畫(huà)基本可以針對(duì)元素的種屬性為尺寸、透明度、顏色等。

8.2、幀動(dòng)畫(huà)

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

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

@keyframes語(yǔ)法：

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

<identifier>： identifier定義一個(gè)動(dòng)畫(huà)名稱(chēng)

<keyframes-blocks>：定義動(dòng)畫(huà)在每個(gè)階段的樣式，即幀動(dòng)畫(huà)。

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

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

示例：

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

效果：

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

練習(xí)與測(cè)試：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>練習(xí)</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> View Code

九、示例下載

https://github.com/zhangguo5/CSS3_6.git

參照：http://www.cnblogs.com/best

轉(zhuǎn)載于:https://www.cnblogs.com/SeeYouBug/p/6154869.html

總結(jié)

以上是生活随笔為你收集整理的CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：梦到自己鼻子流血不止是什么意思
下一篇：【CSS】css特殊性-优先级-权重

CSS

CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...

一、陰影

1.1、文字陰影

1.2、盒子陰影

二、背景

2.1、背景圖像尺寸

2.2、背景圖像顯示的原點(diǎn)

三、偽元素

3.1、before

3.2、after

3.3、清除浮動(dòng)

四、圓角與邊框

4.1、border-radius 圓角

4.2、邊框圖片border-image

五、變形 transform

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

5.2、設(shè)置原點(diǎn) transform-origin?

5.3、平移 translate()?

5.4、縮放 scale

5.5、斜切扭曲skew?

六、漸變

七、透明

7.1、opacity

7.2、transparent與圖片透明

7.3、RGBA

八、動(dòng)畫(huà)

8.1、過(guò)渡動(dòng)畫(huà)

8.2、幀動(dòng)畫(huà)

九、示例下載

總結(jié)

一、陰影

1.2、盒子陰影

二、背景

3.1、before

3.2、after

4.1、border-radius 圓角

4.2、邊框圖片border-image

五、變形 transform

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

5.2、設(shè)置原點(diǎn) transform-origin?

5.3、平移 translate()?

5.4、縮放 scale

5.5、斜切扭曲skew?

七、透明

7.1、opacity

7.3、RGBA

八、動(dòng)畫(huà)