HTML與CSS中的過(guò)渡模塊
發(fā)表時(shí)間：2023-09-13 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)HTML與CSS中的過(guò)渡模塊，HTML與CSS中過(guò)渡模塊的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。 a標(biāo)簽的偽類(lèi)選擇器 a標(biāo)簽1.通過(guò)我們的觀察發(fā)現(xiàn)a標(biāo)簽存在一定的狀態(tài)1.1默認(rèn)狀態(tài), 從未被訪問(wèn)過(guò)1.2被訪問(wèn)過(guò)的狀態(tài)1.3鼠標(biāo)長(zhǎng)按狀態(tài)1.4鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)2.什么是a...
這次給大家?guī)?lái)HTML與CSS中的過(guò)渡模塊，HTML與CSS中過(guò)渡模塊的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
a標(biāo)簽的偽類(lèi)選擇器
a標(biāo)簽
1.通過(guò)我們的觀察發(fā)現(xiàn)a標(biāo)簽存在一定的狀態(tài)
1.1默認(rèn)狀態(tài), 從未被訪問(wèn)過(guò)
1.2被訪問(wèn)過(guò)的狀態(tài)
1.3鼠標(biāo)長(zhǎng)按狀態(tài)
1.4鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)
2.什么是a標(biāo)簽的偽類(lèi)選擇器?
a標(biāo)簽的偽類(lèi)選擇器是專(zhuān)門(mén)用來(lái)修改a標(biāo)簽不同狀態(tài)的樣式的
3.格式
:link 修改從未被訪問(wèn)過(guò)狀態(tài)下的樣式
:visited 修改被訪問(wèn)過(guò)的狀態(tài)下的樣式
:hover 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
:active 修改鼠標(biāo)長(zhǎng)按狀態(tài)下的樣式
a:link{ color: tomato; }
a:visited{ color: green; }
a:hover{ color: orange; }
a:active{ color: pink; }4.注意點(diǎn)
4.1a標(biāo)簽的偽類(lèi)選擇器可以單獨(dú)出現(xiàn)也可以一起出現(xiàn)
4.2a標(biāo)簽的偽類(lèi)選擇器如果一起出現(xiàn), 那么有嚴(yán)格的順序要求
編寫(xiě)的順序必須要個(gè)的遵守愛(ài)恨原則 love hate
4.3如果默認(rèn)狀態(tài)的樣式和被訪問(wèn)過(guò)狀態(tài)的樣式一樣, 那么可以縮寫(xiě)
a{
// 簡(jiǎn)寫(xiě)格式
color: green; }
a:hover{ color: orange; }
a:active{ color: pink; }a標(biāo)簽的偽類(lèi)選擇器練習(xí)
1.在企業(yè)開(kāi)發(fā)中編寫(xiě)a標(biāo)簽的偽類(lèi)選擇器最好寫(xiě)在標(biāo)簽選擇器的后面
2.在企業(yè)開(kāi)發(fā)中和a標(biāo)簽盒子相關(guān)的屬性都寫(xiě)在標(biāo)簽選擇器中(顯示模式/寬度/高度/padding/margin)
3.在企業(yè)開(kāi)發(fā)中和a標(biāo)簽文字/背景相關(guān)的都寫(xiě)在偽類(lèi)選擇器中
ul li a{ width: 120px; height: 40px; display: inline-block; } ul li a:link{ background-color: pink; color: white; text-decoration: none; } ul li a:hover{ color: red; background-color: #ccc; } ul li a:active{ color: yellow; }a標(biāo)簽的偽類(lèi)選擇器練習(xí)
過(guò)渡模塊
p{ width: 100px; height: 50px; background-color: red;
/*告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果*/
transition-property: width, background-color;
/*告訴系統(tǒng)過(guò)渡效果持續(xù)的時(shí)長(zhǎng)*/
transition-duration: 5s, 5s;
/*transition-property: background-color;*/
/*transition-duration: 5s;*/ }
*:hover這個(gè)偽類(lèi)選擇器除了可以用在a標(biāo)簽上, 還可以用在其它的任何標(biāo)簽上*/
p:hover{ width: 300px; background-color: blue; }
![過(guò)渡模塊 ]
(http://upload-images.jianshu.io/upload_images/1482909-de9fd4fa86de87cc.gif?imageMogr2/auto-orient/strip) ######1,過(guò)渡三要素 1.1必須要有屬性發(fā)生變化 1.2必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果 1.3必須告訴系統(tǒng)過(guò)渡效果持續(xù)時(shí)長(zhǎng) ######2.注意點(diǎn) 當(dāng)多個(gè)屬性需要同時(shí)執(zhí)行過(guò)渡效果時(shí)用逗號(hào)隔開(kāi)即可 transition-property: width, background-color; transition-duration: 5s, 5s; ###
過(guò)渡模塊-其它屬性 > transition-delay: 2s;
//告訴系統(tǒng)延遲多少秒之后才開(kāi)始過(guò)渡動(dòng)畫(huà) transition-timing-function: linear;
//告訴系統(tǒng)過(guò)渡動(dòng)畫(huà)的運(yùn)動(dòng)的速度 ###### transition-timing-function: 有五個(gè)取值 linear, ease , ease-in , ease-out , ease-in-out  ###
過(guò)渡連寫(xiě)格式 >######1.過(guò)渡連寫(xiě)格式 transition: 過(guò)渡屬性 過(guò)渡時(shí)長(zhǎng) 運(yùn)動(dòng)速度 延遲時(shí)間;
transition: background-color 5s linear 0s;>######2.過(guò)渡連寫(xiě)注意點(diǎn) 2.1和分開(kāi)寫(xiě)一樣, 如果想給多個(gè)屬性添加過(guò)渡效果也是用逗號(hào)隔開(kāi)即可
transition: width 5s linear 0s,background-color 5s linear 0s;2.2連寫(xiě)的時(shí)可以省略后面的兩個(gè)參數(shù), 因?yàn)橹灰帉?xiě)了前面的兩個(gè)參數(shù)就已經(jīng)滿足了過(guò)渡的三要素
transition: width 5s,background-color 5s,height 5s;
2.3如果多個(gè)屬性運(yùn)動(dòng)的速度/延遲的時(shí)間/持續(xù)時(shí)間都一樣, 那么可以簡(jiǎn)寫(xiě)為:
transition:all 5s;
編寫(xiě)過(guò)渡套路 >1.1不要管過(guò)渡, 先編寫(xiě)基本界面 1.2修改我們認(rèn)為需要修改的屬性 1.3再回過(guò)頭去給被修改屬性的那個(gè)元素添加過(guò)渡即可
.彈性效果
<html> <head> <meta charset="UTF-8"> <title>91-過(guò)渡模塊-彈性效果</title> <style> { margin: 0; padding: 0; } p{ height: 100px; background-color: red; margin-top: 100px; text-align: center; line-height: 100px; } p span{ font-size: 80px; /transition-property: margin;/ /transition-duration: 3s;*/ transition: margin 3s; } p:hover span{ margin: 0 20px; } </style> </head> <body>
<p> <span>呼</span> <span>倫</span> <span>貝</span> <span>爾</span> <span>大</span> <span>草</span> <span>原</span> <span>兒</span> </p> </body> </html>手風(fēng)琴效果
<html> <head> <meta charset="UTF-8"> <title>92-過(guò)渡模塊-手風(fēng)琴效果</title> <style> { margin: 0; padding: 0; } ul{ width: 960px; height: 300px; margin: 100px auto; border: 1px solid #000; overflow: hidden; } ul li{ list-style: none; width: 160px; height: 300px; background-color: red; float: left; /border: 1px solid #000;/ /box-sizing: border-box;/ /transition-property: width;/ /transition-duration: 0.5s;*/ transition: width 0.5s; } ul:hover li{ width: 100px; //ul 被hover 所得li寬度都變成100px } ul li:hover{ width: 460px; //更具體，優(yōu)先級(jí)更高 只有被hover 的li 才會(huì)變寬 } </style> </head> <body> <ul> <li>
</li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </body> </html>相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
網(wǎng)頁(yè)的布局方式之清除浮動(dòng)
HTML與CSS的盒子模型
以上就是HTML與CSS中的過(guò)渡模塊的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
