當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2023/11/29 CSS 79 豆豆

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

一、陰影

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類似的偽元素，不同的是他的位置是在內部的尾部，示例如下：

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

示例：

<!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、設置原點 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.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

<!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中也有漸變，可簡單的認為漸變就是顏色的平滑過度，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中常用的濾鏡：

透明效果：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.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>

效果：

代碼：

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

八、動畫

前端可以使用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。

練習與測試：

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

九、示例下載

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

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

轉載于:https://www.cnblogs.com/SeeYouBug/p/6154869.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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