1、html與css中的過渡模塊a標簽的偽類挑選器a標簽1.通過我們的觀看發覺a標簽存在一定的狀態1.1默認狀態,從未被拜訪過1.2被拜訪過的狀態1.3鼠標長按狀態1.4鼠標懸停在a標簽上狀態2.什么是a標簽的偽類挑選器?a標簽的偽類挑選器是特地用來修改a標簽不同狀態的樣式的3.格式:link修改從未被拜訪過狀態下的樣式:visited修改被拜訪過的狀態下的樣式:hover修改鼠標懸停在a標簽上狀態下的樣式:active修改鼠標長按狀態下的樣式a:linkcolor:tomato;a:visitedcolor:green;a:hovercolor:orange;a:activecolor:pink

2、;4.注重點4.1a標簽的偽類挑選器可以單獨浮現也可以一起浮現4.2a標簽的偽類挑選器假如一起浮現,那么有嚴格的挨次要求編寫的挨次必需要個的遵守愛恨原則lovehate4.3假如默認狀態的樣式和被拜訪過狀態的樣式一樣,那么可以縮寫a/簡寫格式color:green;a:hovercolor:orange;a:activecolor:pink;a標簽的偽類挑選器練習1.在企業開發中編寫a標簽的偽類挑選器最好寫在標簽挑選器的后面2.在企業開發中和a標簽盒子相關的屬性都寫在標簽挑選器中(顯示模式/寬度/高度/padding/margin)3.在企業開發中和a標簽文字/背景相關的都寫在偽類挑選器中ul

3、liawidth:120px;height:40px;display:inline-block;ullia:linkbackground-color:pink;color:white;text-decoration:none;ullia:hovercolor:red;background-color:ccc;ullia:activecolor:yellow;a標簽的偽類挑選器練習過渡模塊pwidth:100px;height:50px;background-color:red;/*告知系統哪個屬性需要執行過渡效果*/transition-property:width,background-co

4、lor;/*告知系統過渡效果持續的時長*/transition-duration:5s,5s;/*transition-property:background-color;*/*transition-duration:5s;*/*:hover這個偽類挑選器除了可以用在a標簽上,還可以用在其它的任何標簽上*/p:hoverwidth:300px;background-color:blue;!過渡模塊(http:/upload-images.jianshu.io/upload_images/1482909-de9fd4fa86de87cc.gif?imagemogr2/auto-orient/st

5、rip)1,過渡三要素1.1必需要有屬性發生變幻1.2必需告知系統哪個屬性需要執行過渡效果1.3必需告知系統過渡效果持續時長2.注重點當多個屬性需要同時執行過渡效果時用逗號隔開即可transition-property:width,background-color;transition-duration:5s,5s;過渡模塊-其它屬性>transition-delay:2s;/告知系統延遲多少秒之后才開頭過渡動畫transition-timing-function:linear;/告知系統過渡動畫的運動的速度transition-timing-function:有五個取值linear,e

6、ase,ease-in,ease-out,ease-in-out!transition-timing-function(http:/upload-images.jianshu.io/upload_images/1482909-22e31879960d948d.png?imagemogr2/auto-orient/strip%7cimageview2/2/w/1240)過渡連寫格式>1.過渡連寫格式transition:過渡屬性過渡時長運動速度延遲時光;transition:background-color5slinear0s;>2.過渡連寫注重點2.1和分開寫一樣,假如想給多個屬性

7、添加過渡效果也是用逗號隔開即可transition:width5slinear0s,background-color5slinear0s;2.2連寫的時可以省略后面的兩個參數,由于只要編寫了前面的兩個參數就已經滿足了過渡的三要素transition:width5s,background-color5s,height5s;2.3假如多個屬性運動的速度/延遲的時光/持續時光都一樣,那么可以簡寫為:transition:all5s;編寫過渡套路>1.1不要管過渡,先編寫基本界面1.2修改我們認為需要修改的屬性1.3再回過頭去給被修改屬性的那個元素添加過渡即可.彈性效果91-過渡模塊-彈性效果m

8、argin:0;padding:0;pheight:100px;background-color:red;margin-top:100px;text-align:center;line-height:100px;pspanfont-size:80px;/transition-property:margin;/transition-duration:3s;*/transition:margin3s;p:hoverspanmargin:020px;呼倫貝爾大草原兒手風琴效果92-過渡模塊-手風琴效果margin:0;padding:0;ulwidth:960px;height:300px;margin:100pxauto;border:1pxsolid000;overflow:hidden;ullilist-style:none;width:160px;height:300px;background-color:red;float:left;/border:1pxsolid000;/box-sizing:border-box;/transition-property:width;/transition-duration:0.5