Unit3使用CSS3樣式修飾頁(yè)面元素2025/9/123:04:24CSS樣式概述：CSS發(fā)展簡(jiǎn)史

CSS樣式規(guī)則基本選擇器與組合選擇器:

基本選擇器

組合選擇器CSS樣式的使用:

行內(nèi)式

內(nèi)嵌式

使用外部樣式文件

樣式?jīng)_突與樣式優(yōu)先級(jí)

CSS高級(jí)特性常用CSS樣式屬性:

CSS盒子模型

文本外觀

方框樣式屬性

元素可見(jiàn)與顯示特性

禁用、陰影與不透明

重新定義HTML元素外觀CSS樣式高級(jí)進(jìn)階:

CSS3新特性

CSS3陰影效果

CSS3動(dòng)畫(huà)效果

CSS3媒體查詢(xún)功能CSS樣式概述2025/9/123:04:24

CSS（CascadingStyleSheets，層疊樣式表）為結(jié)構(gòu)化文檔（如HTML文檔）添加樣式的計(jì)算機(jī)語(yǔ)言，由W3C定義和維護(hù)。CSS并不從屬于HTML。CSS將頁(yè)面內(nèi)容與樣式徹底分離。使用CSS樣式表可以控制HTML標(biāo)簽的顯示樣式，如頁(yè)面的布局、字體、顏色、背景和圖文混排等效果。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。一個(gè)CSS樣式文件可以在多個(gè)頁(yè)面中使用，修改CSS樣式文件，所有引用該樣式文件的頁(yè)面外觀都隨之發(fā)生改變。CSS樣式概述>CSS發(fā)展簡(jiǎn)史2025/9/123:04:24W3C發(fā)布了如下3個(gè)版本。（1）CSS1。1996年發(fā)布，它定義了基礎(chǔ)的樣式規(guī)則，包括字體、顏色、邊框、間距、對(duì)齊方式等。（2）CSS2。1998年發(fā)布，擴(kuò)展了許多新特性，包括定位、Z軸排序、媒體查詢(xún)、表格布局、以及對(duì)樣式表導(dǎo)入的支持。（3）CSS3。2005年發(fā)布，將原有的CSS標(biāo)準(zhǔn)拆分成多個(gè)獨(dú)立的模塊，還增加了許多新特性。CSS提升了Web開(kāi)發(fā)的效率和網(wǎng)頁(yè)的表現(xiàn)力。通過(guò)將內(nèi)容和樣式分離，CSS使得Web開(kāi)發(fā)者能夠更容易地維護(hù)和更新網(wǎng)頁(yè)，同時(shí)提供豐富的視覺(jué)效果和用戶(hù)體驗(yàn)。CSS樣式概述>CSS樣式規(guī)則2025/9/123:04:24CSS樣式規(guī)則是由選擇器和聲明塊組成。選擇器用于找到要應(yīng)用樣式的HTML元素；聲明塊定義要應(yīng)用到這些元素上的樣式。花括號(hào)內(nèi)包含一個(gè)或多個(gè)聲明。每個(gè)聲明由屬性和屬性值組成，并以分號(hào)結(jié)尾。選擇器名稱(chēng)嚴(yán)格區(qū)分大小寫(xiě)，屬性和值不區(qū)分大小寫(xiě)。/*注釋*/添加CSS注釋。Html文件中放在<style></style>中。<style>div{/*標(biāo)簽選擇器*/color:blue;/*字體顏色*/font-size:12px;/*大小*/}/*其他CSS樣式規(guī)則*/</style>基本選擇器與組合選擇器>基本選擇器2025/9/123:04:24基本選擇器：?jiǎn)蝹€(gè)選擇器，未與其他選擇器組合。包括：通用選擇器、標(biāo)簽選擇器、屬性選擇器、類(lèi)選擇器、id選擇器和屬性選擇器等多種類(lèi)型。通用選擇器：通配符“*”表示，作用范圍最廣，能匹配頁(yè)面中所有的元素：*{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n;}

清除所有HTML標(biāo)簽的默認(rèn)邊距。*{margin:0;/*定義外邊距*/padding:0;/*定義內(nèi)邊距*/}基本選擇器與組合選擇器>基本選擇器2025/9/123:04:24標(biāo)簽選擇器：用HTML標(biāo)簽名稱(chēng)作為選擇器，為頁(yè)面中某一類(lèi)標(biāo)簽指定統(tǒng)一的CSS樣式。標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n;}。類(lèi)選擇器:“.”后面緊跟類(lèi)名，對(duì)HTML實(shí)體元素根據(jù)class屬性值查找元素,應(yīng)用樣式。.類(lèi)名{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n;}id選擇器：“#”后面緊跟id名，id名即為HTML元素的id屬性值，id在HTML文檔中對(duì)應(yīng)唯一的元素。#id名{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n;}屬性選擇器：根據(jù)元素的屬性和屬性值進(jìn)行選擇。a[href=""]{color:red;}/*href屬性值為""的<a>元素*/基本選擇器與組合選擇器>組合選擇器2025/9/123:04:24組合選擇器：由兩個(gè)或多個(gè)基本選擇器通過(guò)不同的方式組合而成的選擇器，通過(guò)上下文來(lái)實(shí)現(xiàn)對(duì)元素的精準(zhǔn)控制。后代選擇器：選擇某個(gè)元素內(nèi)的所有后代元素，且不限于直接子元素。不同級(jí)別的選擇器之間使用空格分隔。#menuulli{width:120px;}子選擇器：選擇某個(gè)元素的直接后代，只能出現(xiàn)在后代選擇器之后。否則子選擇器的樣式會(huì)被后代選擇器覆蓋。#linksa{color:red;/*后代選擇器，links中的所有超鏈接*/}#links>a{color:blue;/*子選擇器，links直接后代的超鏈接*/}交集選擇器：將各種類(lèi)型的選擇器按照特定的順序組合在一起，當(dāng)元素同時(shí)滿(mǎn)足所有選擇器的條件時(shí)，就會(huì)被選中。h3.special{…...}或p#one{…...}基本選擇器與組合選擇器>組合選擇器2025/9/123:04:24并集選擇器：由多個(gè)選擇器通過(guò)逗號(hào)連接而成。p,.box,span{font-size:12px;}偽類(lèi)選擇器:

選擇元素的特定狀態(tài)或特定位置，而不是通過(guò)DOM樹(shù)中的明確位置來(lái)選擇。偽類(lèi)選擇器以冒號(hào)“:”開(kāi)頭/*選擇元素在用戶(hù)交互時(shí)的狀態(tài)*/#menuullia:hover{/*用戶(hù)鼠標(biāo)懸停在菜單列表項(xiàng)時(shí)*/color:#FFF;/*#FFF等效#FFFFFF，白色*/ background:url(./images/navhover.png)no-repeat;}/*選擇文檔樹(shù)中特定位置的元素*/

ulli:last-child{/*選擇項(xiàng)目列表的最后一個(gè)列表項(xiàng)*/margin-bottom:-1px;/*下邊框向上收縮1px*/}偽類(lèi)選擇器通過(guò)元素的狀態(tài)或位置動(dòng)態(tài)地選擇元素，這就是“偽”的含義。CSS樣式的使用>行內(nèi)式和內(nèi)嵌式2025/9/123:04:24行內(nèi)式（內(nèi)聯(lián)式）:標(biāo)簽的style屬性來(lái)設(shè)置元素的樣式<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n;">內(nèi)容</標(biāo)簽名>屬性和值的書(shū)寫(xiě)規(guī)范與CSS樣式規(guī)則相同，行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其內(nèi)的子標(biāo)簽起作用。（1）絕大多數(shù)HTML實(shí)體標(biāo)簽都擁有style屬性，用來(lái)設(shè)置行內(nèi)式。（2）內(nèi)聯(lián)樣式?jīng)]有相應(yīng)的選擇器名稱(chēng)。內(nèi)嵌式（內(nèi)部樣式）:將CSS代碼集中寫(xiě)在成對(duì)標(biāo)簽<style>里。<style>

選擇器{屬性名1:屬性值1;屬性名2:屬性值2;…}/*其他樣式*/}

</style><style>標(biāo)簽一般位于頁(yè)面頭部的<title>標(biāo)簽之后，也可放在文檔的其他地方。CSS樣式的使用>使用外部樣式文件2025/9/123:04:24HTML的<header>標(biāo)簽中加載外部的.css文件。<linkhref="含路徑的CSS文件"type="text/css"/>href：鏈接外部樣式表文件的URL，相對(duì)路徑或絕對(duì)路徑；type="text/css"：文檔類(lèi)型為外部的CSS樣式表。@import加載外部文件：只能出現(xiàn)在成對(duì)的<style>標(biāo)簽里。<style>@importurl(sheet1.css)@importurl("sheet2.css")</style>使用<link>標(biāo)簽時(shí)，瀏覽器會(huì)同時(shí)下載CSS文件，并在頁(yè)面加載時(shí)將其應(yīng)用；使用@import時(shí)，CSS會(huì)等到頁(yè)面全部加載完畢后再進(jìn)行加載和渲染，可能導(dǎo)致頁(yè)面渲染不流暢。CSS樣式的使用>樣式?jīng)_突與樣式優(yōu)先級(jí)2025/9/123:04:24樣式?jīng)_突：是指多種CSS樣式疊加時(shí)，出現(xiàn)屬性相同而屬性值不同的沖突現(xiàn)象。優(yōu)先級(jí)最高的會(huì)對(duì)元素起作用。相同優(yōu)先級(jí)中元素定位越準(zhǔn)確的樣式起作用，都相同按順序后覆蓋前。不同來(lái)源優(yōu)先級(jí)順序：內(nèi)聯(lián)樣式>

內(nèi)部樣式><link>外部樣式>@import外部樣式。相同來(lái)源優(yōu)先級(jí)順序：（1）樣式規(guī)則越具體，優(yōu)先級(jí)越高；（2）后面定義的規(guī)則會(huì)覆蓋前面定義的規(guī)則。通用選擇器覆蓋默認(rèn)樣式：通用選擇器無(wú)優(yōu)先級(jí)，只會(huì)覆蓋標(biāo)簽的默認(rèn)樣式。例如，當(dāng)通用選擇器(*)定義了font-size樣式時(shí)，<h1>等標(biāo)題標(biāo)簽的默認(rèn)字體大小樣式將被覆蓋。!important提升為最高優(yōu)先級(jí)：

.class{color:purple!important;}CSS樣式的使用>CSS高級(jí)特性2025/9/123:04:24層疊性：多種CSS樣式的疊加。例如，當(dāng)使用內(nèi)嵌式CSS樣式定義<p>標(biāo)簽字號(hào)大小為12像素，鏈入式定義<p>標(biāo)簽顏色為紅色，那么段落文本將顯示為12像素紅色。繼承性：元素會(huì)繼承父元素的某些樣式。繼承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性，另方面會(huì)使樣式的來(lái)源變得難以追蹤。對(duì)于字體、文本屬性等通用樣式，可以使用繼承。例如，可以在body選擇器里統(tǒng)一設(shè)置字體、字號(hào)、顏色和行距等CSS樣式屬性，這些樣式將通過(guò)繼承影響文檔中的所有文本。無(wú)法繼承的樣式：并不是所有的CSS屬性都可以繼承，例如，以下屬性就不具有繼承性：邊框、外邊距、內(nèi)邊距、背景、定位和元素的寬高屬性。

常用CSS樣式屬性>CSS盒子模型2025/9/123:04:24盒子模型：CSS中每個(gè)HTML元素都被視為一個(gè)矩形的盒子。內(nèi)容區(qū)（content）:

存放文本和圖片等，擁有width、height和overflow三個(gè)屬性。overflow指定溢出內(nèi)容的處理方式：visible呈現(xiàn)在元素框之外（默認(rèn)值）；hidden不可見(jiàn)；scroll滾動(dòng)條查看隱藏部分；auto瀏覽器決定如何處理。邊框（border）:是指圍繞元素的內(nèi)容和內(nèi)邊距的一條或多條線(xiàn)。border-style,border-top-style、border-right-style、border-color和border-radius等設(shè)置。box-shadow用于向框添加一個(gè)或多個(gè)陰影。常用CSS樣式屬性>CSS盒子模型2025/9/123:04:24內(nèi)邊距（padding）：是指內(nèi)容區(qū)與邊框之間的距離。通過(guò)padding屬性設(shè)置該元素所有內(nèi)邊距，padding-top、padding-right、padding-bottom和padding-left屬性對(duì)元素的“上右下左”四個(gè)方向的內(nèi)邊距進(jìn)行設(shè)置。外邊距（margin）：外邊距（margin）是圍繞在元素邊框之外的空白區(qū)域，設(shè)定方法與內(nèi)邊距同。通過(guò)外邊距水平居中：在父容器中水平居中某個(gè)div的方法是，對(duì)該div應(yīng)用如下樣式：margin-left:auto;margin-right:auto;外邊距合并：當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距將發(fā)生合并。合并后的外邊距的高度，等于合并前的兩個(gè)外邊距中的較大者。

常用CSS樣式屬性>文本外觀2025/9/123:04:24文本顏色color：屬性color取值，預(yù)定義的顏色值名稱(chēng)，如red，green，blue等；最常用的十六進(jìn)制色彩碼，如#FF0000，#FF6600，#29D794等；RGB三基色代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。取值為0時(shí)也不能省略%。行間距l(xiāng)ine-height：行與行之間的距離，即行高。單位有三種，最常用的像素px，相對(duì)值em和百分比%。文本裝飾text-decoration：下劃線(xiàn)，上劃線(xiàn)，刪除線(xiàn)等裝飾效果：（默認(rèn)值）none沒(méi)有修飾；underline下劃線(xiàn)；overline上劃線(xiàn)；line-through刪除線(xiàn)。text-decoration后可以賦多個(gè)值，用于給文本添加多種顯示效果。如underline和line-through同時(shí)賦給text-decoration。

常用CSS樣式屬性>文本外觀2025/9/123:04:24水平對(duì)齊方式text-align：text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，其可用屬性值如下：

left用于左對(duì)齊（默認(rèn)值）；right設(shè)置右對(duì)齊；center設(shè)置居中對(duì)齊。

首行縮進(jìn)text-indent：段落的第一行相對(duì)于其他行向右縮進(jìn)一定的距離。在中文排版中，首行縮進(jìn)通常用于段落的開(kāi)頭，以便讓文章的結(jié)構(gòu)更加清晰，視覺(jué)上更有層次感。例如，段落首行文本縮進(jìn)2倍字體大小寬度，應(yīng)使用CSS樣式“text-indent:2em”。常用CSS樣式屬性>方框樣式屬性2025/9/123:04:24寬度width:定義元素的寬度，其取值單位為像素或百分比。高度height:定義元素的高度，其取值單位為像素或百分比。背景background:用來(lái)同時(shí)設(shè)置多個(gè)背景相關(guān)的屬性，如背景顏色、背景圖像、背景重復(fù)方式和背景位置等。

分別設(shè)置：background-color背景顏色；background-image背景圖像。

/*同時(shí)設(shè)置紅色背景為和背景圖像，并且圖像不重復(fù)、居中顯示*/background:#ff0000url('yourImage.jpg')no-repeatcentercenter浮動(dòng)float：設(shè)置塊級(jí)元素的浮動(dòng)。left向左浮動(dòng)；right右浮動(dòng)；none不浮動(dòng)（默認(rèn)值）；inherit從父元素繼承float屬性值。清除浮動(dòng)clear：清除元素浮動(dòng)對(duì)后續(xù)元素的影響，取值通常為both。常用CSS樣式屬性>元素可見(jiàn)與顯示特性2025/9/123:04:24visibility屬性：控制元素的可見(jiàn)性，取值如下：visible：默認(rèn)值，元素可見(jiàn)；hidden：元素不被顯示，但仍然占用布局空間；inherit：從父元素繼承visibility的值。Display屬性：控制元素是否參與布局，是否顯示，取值如下：inline：默認(rèn)值，元素被顯示為行內(nèi)元素，前后沒(méi)有換行符；block：顯示為塊級(jí)元素，前后帶有換行符；none：元素不被顯示，也不占用布局空間；flex：定義彈性布局容器，子元素成為彈性項(xiàng)目；grid：定義網(wǎng)格布局，子元素按網(wǎng)格排列。設(shè)置visibility:hidden和display:none都可以實(shí)現(xiàn)元素的不可見(jiàn)。常用CSS樣式屬性>禁用、陰影與不透明2025/9/123:04:24按鈕disabled屬性：常用于禁用按鈕，禁用后按鈕呈現(xiàn)淺灰色，單擊無(wú)反應(yīng)。<inputtype=“button”value=“我被禁用”disabled/>非CSS樣式屬性，其它HTML元素（如文本框）也可使用。陰影效果：.text-element{/*文字陰影*/text-shadow:3px3px0red;/*X偏移Y偏移模糊半徑顏色*/}.box-element{/*容器陰影*/box-shadow:5px5px5pxrgba(255,0,0,0.5);/*X偏移Y偏移模糊顏色*/}設(shè)置圖像透明度：

pacity:0.5;/*透明度50%*/

0=完全透明(不可見(jiàn)）1=完全不透明，看不到背景（默認(rèn)值）rgba()函數(shù)：color:rgba(255,0,0,0.5)同時(shí)設(shè)置顏色和透明度opacity:0.5;

/*透明度50%*/

常用CSS樣式屬性>重新定義HTML元素外觀2025/9/123:04:24超鏈接外觀：默認(rèn)外觀存在下劃線(xiàn)。為了頁(yè)面美觀，取消默認(rèn)的下劃線(xiàn)：text-decoration:none;列表外觀：默認(rèn)上下排列，并有項(xiàng)目符號(hào)。當(dāng)使用列表設(shè)計(jì)水平菜單時(shí)，通常按如下方法重新定義其外觀：.menuul{list-style:none;/*項(xiàng)目列表無(wú)項(xiàng)目符號(hào)*/}.menuulli{float:left;/*主菜單列表項(xiàng)水平放置*/}塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素：塊級(jí)元素，默認(rèn)是換行的。display:inline-block；

導(dǎo)航條需要實(shí)現(xiàn)任意跳轉(zhuǎn)的表單應(yīng)用行內(nèi)樣式,可以定義寬度與高度，行內(nèi)元素不可以設(shè)置寬度與高度。常用CSS樣式屬性>重新定義HTML元素外觀2025/9/123:04:24水平菜單列表所有應(yīng)用于當(dāng)前元素的樣式及其來(lái)源當(dāng)前選擇的元素CSS樣式高級(jí)進(jìn)階>CSS3新特性2025/9/123:04:24盒子尺寸計(jì)算屬性box-sizing：用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框：box-sizing:content-box/border-box;

content-box：當(dāng)定義width和height時(shí)，它的參數(shù)值不包括border和padding。border-box計(jì)算方式content+padding+border=本身元素大小，即縮小了content大小。

border-box：當(dāng)定義width和height時(shí)，border和padding的參數(shù)值被包含在width和height之內(nèi)。CSS樣式高級(jí)進(jìn)階>CSS3新特性2025/9/123:04:24屬性選擇器：使用一對(duì)方括號(hào)[]，根據(jù)元素的屬性名稱(chēng)或?qū)傩灾祦?lái)選擇元素。

<style> [title]{/*屬性選擇器*/ border-radius:30px; } img[title="第3幅"]{/*本例中，img標(biāo)簽可以省略*/ border-radius:60px; }</style><imgsrc="images/女人.png"width="100"height="130"/><imgsrc="images/女人.png"width="100"height="130"title="第2幅"/><imgsrc="images/女人.png"width="100"height="130"title="第3幅"/><!--第一幅為矩形，第二和三幅具有不同的圓角效果-->CSS樣式高級(jí)進(jìn)階>CSS3新特性2025/9/123:04:24屬性選擇器示例代碼如下：<style> ul[type]{ color:red; }</style><inputtype="button"value="確定"/><ultype="disc"> <li>北京</li> <li>武漢</li></ul><!--頁(yè)面里列表與按鈕2個(gè)元素都具有type屬性，但只有列表應(yīng)用選擇器。-->CSS樣式高級(jí)進(jìn)階>CSS3新特性2025/9/123:04:24普通兄弟選擇器:選擇具有相同父元素的任意兄弟元素，而不要求它們緊鄰。選擇器之間使用波浪號(hào)~來(lái)分隔。相鄰兄弟選擇器:用于選擇緊接在另一元素后的元素，且二者有相同父元素。相鄰兄弟元素之間使用加號(hào)+分隔。<h3>兄弟選擇器</h3><p>使用~表示普通兄弟選擇器</p><div>請(qǐng)將h3~p改為h3+p試試</div><!--將僅作用第1個(gè)段落--><p>使用+表示相鄰兄弟選擇器</p><style> h3~p{/*作用于2個(gè)段落*/margin-top:30px;color:blueviolet;} div{color:red;}</style>最后一個(gè)子元素選擇器:偽類(lèi)選擇器last-child用于選擇父元素中最后一個(gè)子元素。CSS樣式高級(jí)進(jìn)階>CSS3新特性2025/9/123:04:24<metacharset="UTF-8"><title>AdvancedProgression</title><h2style="margin-top:20px">CSS高級(jí)進(jìn)階（AdvancedProgression）</h2><hr/><details><summary>使用偽類(lèi)選擇器（last-child，最后一個(gè)子元素）制作靈活的新聞列表</summary><ul><li>新聞列表新聞列表新聞列表1</li><li>新聞列表新聞列表新聞列表2</li><li>新聞列表新聞列表新聞列表3</li><li>新聞列表新聞列表新聞列表4</li><li>新聞列表新聞列表新聞列表5</li></ul></details><style>*{margin:5px;padding:0px;}details{margin-top:15px;}summary{font-size:20px;font-weight:bold;line-height:25px;}

ul{/*制作新聞列表使用的塊級(jí)元素*/margin:0auto;width:260px;/*固定寬度、不固定高度*/border:2pxsolid#1FC195;/*整個(gè)列表邊框*/list-style:none;}ulli{font-size:14px;line-height:30px;border-bottom:1pxdashed#1FC195;/*列表項(xiàng)下邊框?yàn)閷挾葹?px的點(diǎn)劃線(xiàn)*/padding-left:5px;}

ulli:last-child{/*選擇列表項(xiàng)的最后一項(xiàng)*/margin-bottom:-1px;/*下邊框向上收縮1px*/}</style>CSS樣式高級(jí)進(jìn)階>CSS3陰影效果2025/9/123:04:24

text-shadow：屬性為文本添加陰影效果,基本屬性值依次為水平偏移值、垂直偏移值和陰影顏色（中間使用逗號(hào)分隔）形成浮雕效果。<h1>文字陰影</h1><p>HTML5+CSS3</p><style> h1{font-family:"微軟雅黑";

text-shadow:3px3pxyellow; }p{/*浮雕效果*/font:50pxarial;/*設(shè)置字號(hào)及字體*/color:#d1d1d1;/*設(shè)置文字顏色為淺灰色*/background:#CCC;/*設(shè)置背景顏色為中灰色*/text-shadow:-1px-1pxwhite,/*第一層陰影，位置左上，顏色白色*/2px2pxred;/*第二層陰影，位置右下，顏色紅色*/}</style>CSS樣式高級(jí)進(jìn)階>CSS3陰影效果2025/9/123:04:24box-shadow：為矩形元素（如圖像）添加陰影效果，基本的屬性值依次為X軸偏移、Y軸偏移、陰影大小和陰影顏色共4個(gè)參數(shù)。<imgsrc="images/女人.png"width="205"height="170"/><style> img{

box-shadow:5px5px20px#06c;/*右偏移5px、下偏移5px、陰影大小20px、陰影顏色#06c*/ }</style>CSS樣式高級(jí)進(jìn)階>CSS3動(dòng)畫(huà)效果2025/9/123:04:24屬性transition：過(guò)渡，定義元素屬性值變化時(shí)的動(dòng)畫(huà)設(shè)置，包括持續(xù)時(shí)間、速度曲線(xiàn)和延遲時(shí)間。屬性transform：變換方式。實(shí)現(xiàn)對(duì)頁(yè)面元素的旋轉(zhuǎn)、縮放、傾斜和移動(dòng)等效果，可以使用如下變換函數(shù)作為CSS樣式屬性transform的值：translate()：函數(shù)參數(shù)為目標(biāo)坐標(biāo)，移動(dòng)元素到目標(biāo)坐標(biāo)；scale()：縮放元素，取值包括正數(shù)、負(fù)數(shù)和小數(shù)；rotate()：旋轉(zhuǎn)元素，取值為一個(gè)度數(shù)；skew()：傾斜元素，取值為一個(gè)度數(shù)。

兩個(gè)CSS樣式屬性通常一起配合使用。

CSS樣式高級(jí)進(jìn)階>CSS3動(dòng)畫(huà)效果2025/9/123:04:24

<metacharset="utf-8"/><title>汽車(chē)運(yùn)動(dòng)動(dòng)畫(huà)</title><divid="bj"> <imgsrc="images/car.png"width="343"height="121"/></div><style> #bj{

background-image:url(../images/road.png); background-repeat:no-repeat; height:560px; } img{ position:absolute;/*絕對(duì)定位*/ top:185px;/*定義起始位置*/

transition:5slinear;/*過(guò)渡動(dòng)畫(huà)效果：5秒、線(xiàn)性轉(zhuǎn)換*/ }

img:hover{

transform:translate(385px,-75px);/*移動(dòng)元素至目標(biāo)位置*/}</style>汽車(chē)在起始點(diǎn)靜止，當(dāng)鼠標(biāo)位于汽車(chē)上時(shí)，汽車(chē)開(kāi)始前行，到達(dá)終點(diǎn)后停止；移動(dòng)一下鼠標(biāo)后，汽車(chē)后將回退至起始點(diǎn)CSS樣式高級(jí)進(jìn)階>CSS3動(dòng)畫(huà)效果2025/9/123:04:24使用關(guān)鍵幀創(chuàng)建動(dòng)畫(huà)：@keyframes中規(guī)定某項(xiàng)CSS樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果。

矩形塊，當(dāng)鼠標(biāo)位于它上方時(shí)，在5秒鐘內(nèi)顏色從紅色變成了灰色。使用@keyframes定義名為myFirst的動(dòng)畫(huà)，第1關(guān)鍵幀的顏色設(shè)置為red，第2關(guān)鍵幀的顏色設(shè)置為rgb(224,224,210)：<metacharset="UTF-8"/><divid="rectangleAnimation">關(guān)鍵幀動(dòng)畫(huà)</div><style>#rectangleAnimation{width:100px;height:100px;background:red;}#rectangleAnimation:hover{animation:myFirst5s;/*定義動(dòng)畫(huà)機(jī)的名稱(chēng)及時(shí)長(zhǎng)*/}@keyframesmyFirst{/*定義關(guān)鍵幀*/from{background:red;}to{background:rgb(224,224,210);}}</style>CSS樣式高級(jí)進(jìn)階>CSS3動(dòng)畫(huà)效果2025/9/123:04:24

<divclass="goods"> <imgsrc="images/balloons.png"width="200"height="220"> <divclass="circular"></div></div><style> .goods{width:50%;margin:50pxauto;text-align:center;} .goodsimg{ animation:jump2sinfinite;/*infinite是永久循環(huán)*/}

@keyframesjump{/*關(guān)鍵幀動(dòng)畫(huà)設(shè)計(jì)*/ 0%{ transform:translate(0px,0px);} 50%{transform:translate(0px,-50px);/*在Y軸方向向下跳動(dòng)*/} 100%{transform:translate(0px,0px);/*在Y