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