css3新特性的應(yīng)用示例分析
我要評(píng)論css3 盒子模型
css3 中可以通過(guò) box-sizing 來(lái)指定盒模型，有2個(gè)值：即可指定為 content-box 、border-box ，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變。
可以分成兩種情況：
box - sizing : content - box 盒子大小為 width + padding + border （以前默認(rèn)的）
box- sizing : border - box 盒子大小為 width
我們學(xué)盒子模型時(shí)知道padding 和 border 會(huì)撐大盒子，如果盒子模型我們改為了 box - sizing :border - box ，那 padding 和 border 就不會(huì)撐大盒子了（前提 padding 和 border 不會(huì)超過(guò) width 寬度)
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
box-sizing: border-box;
border: 2px solid red;
padding: 3px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
由圖可以看到，當(dāng)我去掉box- sizing : border - box ; 后，盒子寬高會(huì)變成210px,加上了padding 和 border。
css3 濾鏡filter(可做圖片模糊處理)
filter css屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。
filter:函數(shù) () ；例如： filter : blur (5px); blur 模糊處理，數(shù)值越大越模糊
（目前記住blur()這個(gè)函數(shù)就行）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
}
div img{
width: 100%;
vertical-align: bottom;
filter: blur(5px); /*必須要加單位px*/
}
</style>
</head>
<body>
<div>
<img src="123.jpg" alt="">
</div>
</body>
</html>
可以看到圖片變模糊了。
css3 calc函數(shù)
calc()此 css 函數(shù)讓你在聲明 css 屬性值時(shí)執(zhí)行一些計(jì)算。
width :calc(100%-80px);
括號(hào)里面可以使用 + - * ／來(lái)進(jìn)行計(jì)算。
示例
有兩個(gè)盒子，不管父盒子寬度怎么變化，讓子盒子寬度永遠(yuǎn)比父盒子小30px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 200px;
height: 100px;
background-color: pink;
}
.son{
width: calc(100% - 30px);
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
由上圖可以看到，子盒子寬度會(huì)隨父盒子寬度一同變化。
css3 過(guò)渡(transition) (重要)
過(guò)渡（ transition ）是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
過(guò)渡動(dòng)畫：是從一個(gè)狀態(tài)漸漸的過(guò)渡到另外一個(gè)狀態(tài)，可以讓我們們頁(yè)面更好看，更動(dòng)感十足，雖然低版本瀏覽器不支持（ie9以下版本）但是不會(huì)影響頁(yè)面布局。
我們現(xiàn)在經(jīng)常和 : hover 一起搭配使用。
transition ：要過(guò)渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始；
1．屬性：想要變化的 css 屬性，寬度高度背景顏色內(nèi)外邊距都可以。如果想要所有的屬性都變化過(guò)渡，寫一個(gè) all 就可以。
2．花費(fèi)時(shí)間：?jiǎn)挝皇敲耄ū仨殞憜挝唬┍热?.5s
3．運(yùn)動(dòng)曲線：默認(rèn)是 ease （可以省略）
4．何時(shí)開(kāi)始：?jiǎn)挝皇敲耄ū仨殞憜挝唬┛梢栽O(shè)置延遲觸發(fā)時(shí)間,默認(rèn)是 0s （可以省略）
運(yùn)動(dòng)曲線
過(guò)渡使用口訣：誰(shuí)做過(guò)渡給誰(shuí)加
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 100px;
background-color: skyblue;
/* transition ：要過(guò)渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始； */
/* 1. 給寬度加過(guò)渡 */
/* transition: width 0.5s ease 0s; */
/* 2. 給寬度和高度加過(guò)渡，多個(gè)屬性中間用逗號(hào)分割 */
/* transition: width 0.5s , height 0.5s; */
/* 3. 對(duì)：hover里的全部屬性加過(guò)渡，用all就行 */
transition: all 0.5s;
}
div:hover{
width: 400px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例-進(jìn)度條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bar{
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in{
width: 50%;
height: 100%;
background-color: red;
transition: width .5s;
}
.bar:hover .bar_in{
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
結(jié)語(yǔ)
以上就是css3新特性的應(yīng)用示例分析的詳細(xì)內(nèi)容，更多關(guān)于css3新特性應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解Css3新特性應(yīng)用之過(guò)渡與動(dòng)畫
本篇文章主要介紹了Css3新特性應(yīng)用之過(guò)渡與動(dòng)畫，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-10Css3新特性應(yīng)用之視覺(jué)效果實(shí)例
這篇文章主要介紹了Css3新特性應(yīng)用之視覺(jué)效果實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。2016-12-12- 這篇文章主要介紹了Css3新特性應(yīng)用之形狀總結(jié),非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-08
這篇文章主要介紹了CSS3動(dòng)畫和HTML5新特性詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-31- CSS是一門不斷在發(fā)展的“語(yǔ)言”，在我們?nèi)粘Ｃ嬖嚽岸斯ぷ鞯臅r(shí)候是必不可少的一個(gè)知識(shí)點(diǎn)，下面這篇文章主要給大家分享介紹了關(guān)于前端面試必備之CSS3新特性的相關(guān)資料，文中2017-09-05
淺談CSS3特性查詢（Feature Query: @supports）功能簡(jiǎn)介
這是2017年不能不了解和學(xué)習(xí)的一個(gè)CSS新特性，非常實(shí)用，考慮到現(xiàn)實(shí)世界瀏覽器的復(fù)雜性，該特性本應(yīng)該先于其他新特性出來(lái)。2017-07-31靈活運(yùn)用CSS3特性繪制簡(jiǎn)易版圍棋效果
這篇文章主要為大家詳細(xì)介紹了如何靈活運(yùn)用CSS3特性繪制簡(jiǎn)易版圍棋效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-28結(jié)合CSS3的新特性來(lái)總結(jié)垂直居中的實(shí)現(xiàn)方法
CSS3中的flex布局和before偽元素等特性用來(lái)實(shí)現(xiàn)垂直居中真的是太方便和優(yōu)雅了,這里我們就來(lái)結(jié)合CSS3的新特性來(lái)總結(jié)垂直居中的實(shí)現(xiàn)方法:2016-05-30詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性
這篇文章主要介紹了詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性,既涵蓋了基礎(chǔ)的邊框?qū)挾扰c顏色設(shè)置又講到了CSS3中的圖片邊框及邊框漸變,需要的朋友可以參考下2016-05-10- 下面小編就為大家?guī)?lái)一篇css3 中的新特性加強(qiáng)記憶詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-04-16
