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

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的杜集網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

a標(biāo)簽

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

1.1默認(rèn)狀態(tài), 從未被訪問過

1.2被訪問過的狀態(tài)

1.3鼠標(biāo)長按狀態(tài)

1.4鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)

2.什么是a標(biāo)簽的偽類選擇器?

a標(biāo)簽的偽類選擇器是專門用來修改a標(biāo)簽不同狀態(tài)的樣式的

3.格式

:link 修改從未被訪問過狀態(tài)下的樣式

:visited 修改被訪問過的狀態(tài)下的樣式

:hover 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式

:active 修改鼠標(biāo)長按狀態(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)簽的偽類選擇器可以單獨(dú)出現(xiàn)也可以一起出現(xiàn)

4.2a標(biāo)簽的偽類選擇器如果一起出現(xiàn), 那么有嚴(yán)格的順序要求
編寫的順序必須要個的遵守愛恨原則 love hate

4.3如果默認(rèn)狀態(tài)的樣式和被訪問過狀態(tài)的樣式一樣, 那么可以縮寫

  a{             
  // 簡寫格式             
  color: green;         }         
  a:hover{             color: orange;         }         
  a:active{             color: pink;         }

a標(biāo)簽的偽類選擇器練習(xí)

1.在企業(yè)開發(fā)中編寫a標(biāo)簽的偽類選擇器最好寫在標(biāo)簽選擇器的后面
2.在企業(yè)開發(fā)中和a標(biāo)簽盒子相關(guān)的屬性都寫在標(biāo)簽選擇器中(顯示模式/寬度/高度/padding/margin)
3.在企業(yè)開發(fā)中和a標(biāo)簽文字/背景相關(guān)的都寫在偽類選擇器中

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)簽的偽類選擇器練習(xí)

過渡模塊

p{         width: 100px;         height: 50px;         background-color: red;        
/*告訴系統(tǒng)哪個屬性需要執(zhí)行過渡效果*/ 
transition-property: width, background-color;         
/*告訴系統(tǒng)過渡效果持續(xù)的時長*/         
transition-duration: 5s, 5s;         
/*transition-property: background-color;*/
/*transition-duration: 5s;*/     }     
*:hover這個偽類選擇器除了可以用在a標(biāo)簽上, 還可以用在其它的任何標(biāo)簽上*/
p:hover{         width: 300px;         background-color: blue;     }
  ![過渡模塊 ]
  (/upload/otherpic71/9571.jpg)  ######1,過渡三要素 1.1必須要有屬性發(fā)生變化 1.2必須告訴系統(tǒng)哪個屬性需要執(zhí)行過渡效果 1.3必須告訴系統(tǒng)過渡效果持續(xù)時長 ######2.注意點(diǎn) 當(dāng)多個屬性需要同時執(zhí)行過渡效果時用逗號隔開即可 transition-property: width, background-color; transition-duration: 5s, 5s; ###
    過渡模塊-其它屬性 >  transition-delay: 2s;   
    //告訴系統(tǒng)延遲多少秒之后才開始過渡動畫 transition-timing-function: linear; 
    //告訴系統(tǒng)過渡動畫的運(yùn)動的速度 ###### transition-timing-function:  有五個取值 linear, ease , ease-in , ease-out , ease-in-out ![transition-timing-function](/upload/otherpic71/9572.jpg%7CimageView2/2/w/1240) ###
    過渡連寫格式 >######1.過渡連寫格式 transition: 過渡屬性 過渡時長 運(yùn)動速度 延遲時間;  
transition: background-color 5s linear 0s;>######2.過渡連寫注意點(diǎn) 2.1和分開寫一樣, 如果想給多個屬性添加過渡效果也是用逗號隔開即可  
transition: width 5s linear 0s,background-color 5s linear 0s;

2.2連寫的時可以省略后面的兩個參數(shù), 因為只要編寫了前面的兩個參數(shù)就已經(jīng)滿足了過渡的三要素

transition: width 5s,background-color 5s,height 5s;

2.3如果多個屬性運(yùn)動的速度/延遲的時間/持續(xù)時間都一樣, 那么可以簡寫為:

transition:all 5s;

編寫過渡套路 >1.1不要管過渡, 先編寫基本界面 1.2修改我們認(rèn)為需要修改的屬性 1.3再回過頭去給被修改屬性的那個元素添加過渡即可

.彈性效果

      
 呼 倫 貝 爾 大 草 原 兒 
  

手風(fēng)琴效果

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