什么是HTML與CSS中的過(guò)渡模塊

發(fā)布時(shí)間：2020-07-20 10:19:08 來(lái)源：億速云閱讀：150 作者：Leah 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)什么是HTML與CSS中的過(guò)渡模塊，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

a標(biāo)簽的偽類(lèi)選擇器

a標(biāo)簽

1.通過(guò)我們的觀察發(fā)現(xiàn)a標(biāo)簽存在一定的狀態(tài)

1.1默認(rèn)狀態(tài), 從未被訪(fǎng)問(wèn)過(guò)

1.2被訪(fǎng)問(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 修改從未被訪(fǎng)問(wèn)過(guò)狀態(tài)下的樣式

:visited 修改被訪(fǎng)問(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)的樣式和被訪(fǎng)問(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ò)渡模塊 ]
  (https://cache.yisu.com/upload/information/20200318/90/9571.jpg?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 ![transition-timing-function](https://cache.yisu.com/upload/information/20200318/90/9572.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ###
    過(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)滿(mǎn)足了過(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>

關(guān)于什么是HTML與CSS中的過(guò)渡模塊就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

什么是HTML與CSS中的過(guò)渡模塊

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽