什么是HTML與CSS中的過渡模塊

這篇文章將為大家詳細(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)站、手機端網(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.注意點

4.1a標(biāo)簽的偽類選擇器可以單獨出現(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.注意點 當(dāng)多個屬性需要同時執(zhí)行過渡效果時用逗號隔開即可 transition-property: width, background-color; transition-duration: 5s, 5s; ###
    過渡模塊-其它屬性 >  transition-delay: 2s;   
    //告訴系統(tǒng)延遲多少秒之后才開始過渡動畫 transition-timing-function: linear; 
    //告訴系統(tǒng)過渡動畫的運動的速度 ###### 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: 過渡屬性 過渡時長 運動速度 延遲時間;  
transition: background-color 5s linear 0s;>######2.過渡連寫注意點 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如果多個屬性運動的速度/延遲的時間/持續(xù)時間都一樣, 那么可以簡寫為:

transition:all 5s;

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

.彈性效果

<html> <head> <meta charset="UTF-8"> <title>91-過渡模塊-彈性效果</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-過渡模塊-手風(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)先級更高 只有被hover 的li 才會變寬 } </style> </head> <body> <ul> <li>
</li> <li>  </li> <li>  </li> <li>  </li> <li>  </li> <li>  </li> </ul> </body> </html>

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

本文標(biāo)題：什么是HTML與CSS中的過渡模塊
轉(zhuǎn)載來于：http://bm7419.com/article42/pscsec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計、定制開發(fā)、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容