Web前端開(kāi)發(fā)（HTML5+CSS3+JavaScript） 課件 第8章 CSS3新特性

Web前端基礎(chǔ)技術(shù)CSSJSHTML第8章CSS3新特性Contents目錄邊框陰影/圓角；轉(zhuǎn)換：位移；旋轉(zhuǎn)；縮放過(guò)渡動(dòng)畫(huà)CSS3基礎(chǔ)應(yīng)用盒子陰影、圓角邊框CSS3邊框；CSS3轉(zhuǎn)換；CSS3過(guò)渡；CSS3動(dòng)畫(huà)；CSS3文本效果a.盒子陰影：box-shadow:

xyblur(陰影距離)[spread(擴(kuò)散距離)]color[inset/outset]xy相對(duì)左上角位置出現(xiàn)陰影的起始點(diǎn)，單位px，默認(rèn)為00（左上角坐標(biāo)）blur陰影距離,單位px；spread陰影擴(kuò)散程度（通常省略），單位pxcolor：陰影顏色inset/outset內(nèi)部陰影/外部陰影（擴(kuò)散，默認(rèn)外部outset）b.邊框圓角：border-radius:toprightbottomleft；獨(dú)立屬性border-top-left-radius:px;/*左上角*/border-top-right-radius:px;/*右上角*/border-bottom-left-radius:px;/*左下角*/border-bottom-right-radius:px;/*右下角*/border-radius:x1y1x2y2;

/*順時(shí)針：上、右、下、左；各個(gè)頂點(diǎn)圓角的半徑值*/border-radius:xy;/*對(duì)角設(shè)置：左上右下右上左下圓角的半徑值*/border-radius:x;/*四個(gè)半徑值相同*/border-radius:50%;/*相對(duì)寬高均為50%的半徑值，寬度和高度相等時(shí)為圓*/border-radius:40px80px

示例

邊框陰影與圓角---卡片式商品列表<divclass="container"><divclass="item"><imgsrc="./images/1.avif"/><p>商品描述</p><p>價(jià)格</p></div><divclass="item"><imgsrc="./images/2.avif"/><p>商品描述</p><p>價(jià)格</p></div><!--重復(fù)--></div><style>*{box-sizing:border-box;}.container{width:800px;/*border:1pxsolidred;*//*水平排列，可分行顯示*/display:flex;flex-wrap:wrap;}.item{width:200px;margin:10px;/*陰影效果*/box-shadow:0020px#ccc;/*美觀目的，給一定內(nèi)邊距*/padding:10px;/*圓角*/border-radius:6px;}.item>img{width:100%;}</style>參見(jiàn)實(shí)例v22.

CSS3基礎(chǔ)應(yīng)用---樣式屬性1.位移（相對(duì)當(dāng)前位置）；2.旋轉(zhuǎn)（相對(duì)給定坐標(biāo)點(diǎn)，默認(rèn)中心點(diǎn)）；3.縮放；4.傾斜skew(角度)CSS3邊框；CSS3轉(zhuǎn)換；CSS3過(guò)渡；CSS3動(dòng)畫(huà)；CSS3文本效果1.位移：?jiǎn)挝籶x，類(lèi)似基于相對(duì)位置（position:relative）來(lái)改變位置。transform:translate(x,y)相對(duì)當(dāng)前位置，偏移原點(diǎn)/中心點(diǎn)的坐標(biāo)(相對(duì)位置移動(dòng)，還占據(jù)原來(lái)空間)transform:translateX(x)僅水平方向位移transform:translateY(y):僅垂直方法位移單位：像素px示例：位移<divclass="container"><divclass="div1">仍占據(jù)位置，浮動(dòng)出來(lái)，不影響后續(xù)元素布局</div></div><style>.container{border:10pxsolidgreen;width:200px;}.div1{width:100px;height:100px;background-color:red;}.container:hover.div1{

transform:translate(100px,100px);}</style>2.平面2D旋轉(zhuǎn)：實(shí)例：轉(zhuǎn)換為圓的旋轉(zhuǎn)；transform:rotate(ndeg)角度單位deg，順時(shí)針旋轉(zhuǎn),默認(rèn)旋轉(zhuǎn)坐標(biāo)：中心點(diǎn).可以更改選擇基點(diǎn):使用transform-origin:lefttop;/*基于左上頂點(diǎn)（00），可以使用關(guān)鍵字或具體數(shù)值*/示例：旋轉(zhuǎn)45deg.container:hover.div1{/*transform:translate(100px,100px);*/transform:rotate(45deg)}2.

CSS3基礎(chǔ)應(yīng)用位移（相對(duì)當(dāng)前位置）；旋轉(zhuǎn)（相對(duì)給定坐標(biāo)點(diǎn)，默認(rèn)中心點(diǎn)）；縮放；4.傾斜skew(角度)CSS3邊框；CSS3轉(zhuǎn)換；CSS3過(guò)渡；CSS3動(dòng)畫(huà)；CSS3文本效果3.縮放

:transform:scale(xn,yn)

寬度高度同時(shí)縮放的倍數(shù)可以是小數(shù)，無(wú)單位transform:scaleX(xn)僅寬度縮放transform:scaleY(yn):僅高度縮放

大于1---放大；小于1---縮小<divclass="container"><imgclass="item"src="./images/1.avif"><imgclass="item"src="./images/2.avif"><imgclass="item"src="./images/3.avif"><imgclass="item"src="./images/4.avif"></div>示例縮放圖片<style>*{box-sizing:border-box;}.container{width:800px;display:flex;flex-wrap:wrap;}.item{width:100px;height:100px;margin:10px;}.item:hover{transform:scale(1.2,1.2);}</style>使元素沿著水平方向

或垂直方向發(fā)生傾斜語(yǔ)法格式：transition:skew(角度)單位：deg位移（相對(duì)當(dāng)前位置）；旋轉(zhuǎn)（相對(duì)給定坐標(biāo)點(diǎn)，默認(rèn)中心點(diǎn)）；縮放；4.傾斜skew(角度)CSS3邊框；CSS3轉(zhuǎn)換；CSS3過(guò)渡；CSS3動(dòng)畫(huà)；CSS3文本效果skew(30deg,0)==skewX(30deg)skew(-30deg,0)==skewX(-30deg)原始狀態(tài)

向左推

向右推

skew(0,30deg)==skewY(30deg)skew(0,-30deg)==skewY(-30deg)原始狀態(tài)

向下推

向上推

<imgsrc="./images/1.jpg"/>

<imgsrc="./images/2.jpg"/>

<imgsrc="./images/3.jpg"/>

<style>

img{

width:200px;

height:200px;

/*距離頁(yè)面一定距離*/

margin:100px;

transform:skew(0,-30deg);/*垂直方向上傾斜-30度*/

border:2pxsolid#ccc;

}</style>2.

CSS3基礎(chǔ)應(yīng)用CSS3過(guò)渡transition(漸變)：根據(jù)指定的屬性，從其初始值到終止值逐漸變化的過(guò)程CSS3邊框；CSS3轉(zhuǎn)換；CSS3過(guò)渡；CSS3動(dòng)畫(huà)；CSS3文本效果語(yǔ)法格式transition:property[屬性]duration[持續(xù)秒數(shù)]timing-function(時(shí)間函數(shù))delay（延遲多少秒才開(kāi)始）

注意：需要過(guò)渡的屬性必須顯式設(shè)置初始值

多重效果（多個(gè)屬性）可以同時(shí)進(jìn)行，每組過(guò)渡效果使用逗號(hào)分隔property：屬性名，即哪個(gè)樣式屬性改變時(shí)，觸發(fā)過(guò)渡效果【注意：該屬性必須設(shè)置初始值！】duration：漸變過(guò)程用時(shí)，單位：s，即秒times-function：漸變效果，即慢速開(kāi)始/慢速結(jié)束/先慢后快等。delay:延時(shí)多少秒開(kāi)始產(chǎn)生過(guò)渡效果附：timing-function屬性取值：linear 勻速，規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果ease

規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果ease-in 規(guī)定以慢速開(kāi)始的過(guò)渡效果ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果ease-in-out規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果示例理解過(guò)渡：寬度、高度和背景變化時(shí)，產(chǎn)生過(guò)渡效果<divclass="main">

理解過(guò)渡

</div>.main{

width:200px;height:40px;color:white;background-color:black;

transition:width2s,height1s,color2s,background-color2s;}.main:hover{width:400px;height:100px;background-color:red;}示例效果過(guò)渡，緩慢旋轉(zhuǎn)的圓

<!--旋轉(zhuǎn)圓--><divclass="circle"></div>.circle{width:200px;height:200px;border-radius:50%;border:10pxsolidblue;

border-top-color:red;

transition:transform2slinear;}.circle:hover{transform:rotate(90deg);}所有的轉(zhuǎn)換過(guò)渡過(guò)程，都使用transform屬性，不需要初始值2.

CSS3基礎(chǔ)應(yīng)用CSS3動(dòng)畫(huà)animation:可以是簡(jiǎn)單過(guò)渡（fromto），也可以在不同階段使樣式產(chǎn)生連續(xù)的變化；或不同階段有不同樣式。內(nèi)容：1：屬性；2.簡(jiǎn)單的過(guò)渡；3.暫停/繼續(xù)；

CSS3邊框；CSS3轉(zhuǎn)換；CSS3過(guò)渡；CSS3動(dòng)畫(huà)；CSS3文本效果animation:組合屬性（順序無(wú)關(guān)）nameduration【timing-function】

【delay】【iteration-count】

【direction】語(yǔ)法格式animation-name

指定要綁定到選擇器的關(guān)鍵幀的名稱，必須先定義關(guān)鍵幀名animation-duration

動(dòng)畫(huà)指定需要多少秒或毫秒完成animation-timing-function

設(shè)置動(dòng)畫(huà)將如何完成一個(gè)周期(與過(guò)渡屬性值相同)animation-delay

設(shè)置動(dòng)畫(huà)在啟動(dòng)前的延遲間隔。animation-iteration-count

整數(shù)值，定義動(dòng)畫(huà)的播放次數(shù)；如果無(wú)限循環(huán)，使用infinite。animation-direction

指定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。normal、reverse、alternateanimation-fill-mode

規(guī)定當(dāng)動(dòng)畫(huà)完成后(100%)，要應(yīng)用到元素的其他樣式（結(jié)束樣式）。animation-play-state

指定（設(shè)置）動(dòng)畫(huà)是否正在運(yùn)行或已暫停。取值paused/running（是否暫停）示例模擬進(jìn)度條

<divclass="container">

<divclass="progress"></div>

</div><style>

.container{

width:200px;

height:40px;

border:1pxsolid#ccc;

}

.progress{

width:0;

height:100%;

background-color:red;

/*動(dòng)畫(huà)效果,引用change關(guān)鍵幀*/

animation:change10slinearinfinitealternate;

/*保持初始狀態(tài)*/

/*animation-fill-mode:backwards;*/

/*動(dòng)畫(huà)結(jié)束后，保持終止?fàn)顟B(tài)*/

animation-fill-mode:forwards;

}

/*定義關(guān)鍵幀*/

@keyframeschange{

/*初始狀態(tài)*/

0%{

width:0%;

}

/*中間狀態(tài)*/

50%{

width:50%;

}

/*終止?fàn)顟B(tài)*/

100%{

width:100%;

}

}

/*鼠標(biāo)懸停時(shí)暫停動(dòng)畫(huà)*/

.container:hover>.progress{

animation-play-state:paused;

}</style>把持續(xù)時(shí)間分成3等分理解代碼.無(wú)限循環(huán)旋轉(zhuǎn)的圓；;<style>.circle{width:80px;height:80px;border-radius:50%;border:10pxsolid#ccc;border-top:10pxsolidred;background-color:#ccc;/*動(dòng)畫(huà)*/

animation:rotate2sinfinitelinear;}

@keyframesrotate{0%{/*from*/transform:rotate(0deg);}

100%{/*to*/transform:rotate(360deg);}}</style><divclass="circle"></div>2.

CSS3基礎(chǔ)應(yīng)用Overflow：hiddenwhite-space:nowrap;text-overflow:ellipsis注