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

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

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

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

示例

邊框陰影與圓角---卡片式商品列表<divclass="container"><divclass="item"><imgsrc="./images/1.avif"/><p>商品描述</p><p>價格</p></div><divclass="item"><imgsrc="./images/2.avif"/><p>商品描述</p><p>價格</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>參見實例v22.

CSS3基礎(chǔ)應(yīng)用---樣式屬性1.位移（相對當(dāng)前位置）；2.旋轉(zhuǎn)（相對給定坐標點，默認中心點）；3.縮放；4.傾斜skew(角度)CSS3邊框；CSS3轉(zhuǎn)換；CSS3過渡；CSS3動畫；CSS3文本效果1.位移：單位px，類似基于相對位置（position:relative）來改變位置。transform:translate(x,y)相對當(dāng)前位置，偏移原點/中心點的坐標(相對位置移動，還占據(jù)原來空間)transform:translateX(x)僅水平方向位移transform:translateY(y):僅垂直方法位移單位：像素px示例：位移<divclass="container"><divclass="div1">仍占據(jù)位置，浮動出來，不影響后續(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)：實例：轉(zhuǎn)換為圓的旋轉(zhuǎn)；transform:rotate(ndeg)角度單位deg，順時針旋轉(zhuǎn),默認旋轉(zhuǎn)坐標：中心點.可以更改選擇基點:使用transform-origin:lefttop;/*基于左上頂點（00），可以使用關(guān)鍵字或具體數(shù)值*/示例：旋轉(zhuǎn)45deg.container:hover.div1{/*transform:translate(100px,100px);*/transform:rotate(45deg)}2.

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

:transform:scale(xn,yn)

寬度高度同時縮放的倍數(shù)可以是小數(shù)，無單位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ā)生傾斜語法格式：transition:skew(角度)單位：deg位移（相對當(dāng)前位置）；旋轉(zhuǎn)（相對給定坐標點，默認中心點）；縮放；4.傾斜skew(角度)CSS3邊框；CSS3轉(zhuǎn)換；CSS3過渡；CSS3動畫；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;

/*距離頁面一定距離*/

margin:100px;

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

border:2pxsolid#ccc;

}</style>2.

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

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

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

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

理解過渡

</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;}示例效果過渡，緩慢旋轉(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)換過渡過程，都使用transform屬性，不需要初始值2.

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

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

【delay】【iteration-count】

【direction】語法格式animation-name

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

動畫指定需要多少秒或毫秒完成animation-timing-function

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

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

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

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

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

指定（設(shè)置）動畫是否正在運行或已暫停。取值paused/running（是否暫停）示例模擬進度條

<divclass="container">

<divclass="progress"></div>

</div><style>

.container{

width:200px;

height:40px;

border:1pxsolid#ccc;

}

.progress{

width:0;

height:100%;

background-color:red;

/*動畫效果,引用change關(guān)鍵幀*/

animation:change10slinearinfinitealternate;

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

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

/*動畫結(jié)束后，保持終止狀態(tài)*/

animation-fill-mode:forwards;

}

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

@keyframeschange{

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

0%{

width:0%;

}

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

50%{

width:50%;

}

/*終止狀態(tài)*/

100%{

width:100%;

}

}

/*鼠標懸停時暫停動畫*/

.container:hover>.progress{

animation-play-state:paused;

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

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注