CSS3之過渡模塊

a標(biāo)簽的偽類選擇器:專門用來修改不同狀態(tài)的樣式的
1、默認(rèn)狀態(tài)违施,從未被訪問過
格式:
a:link {color: green;} /* 修改從未被訪問過下的狀態(tài)的樣式 */

2瑟幕、被訪問過的狀態(tài)
格式:
a:visited {color: tomato;} /* 修改 被訪問過下的狀態(tài)的樣式 */

3只盹、鼠標(biāo)懸停在標(biāo)簽上的狀態(tài)
格式:
a:hover {color: orange;} /* w修改 鼠標(biāo)懸停在標(biāo)簽上的狀態(tài) 的樣式 */

4、鼠標(biāo)長按的狀態(tài)
格式:
a:active {color: chocolate;} /* 修改 長按狀態(tài) 的樣式 */

——注意點(diǎn)
1排吴、a標(biāo)簽偽選擇器如果一起出現(xiàn)懦鼠,有嚴(yán)格的順序要求:lvha
link -- visited -- hover -- active
默認(rèn) 被訪問 懸停 長按

CSS3 的過渡模塊:
:hover屬性可以監(jiān)聽鼠標(biāo)的懸停狀態(tài),當(dāng)鼠標(biāo)懸停在元素上讓元素發(fā)生一些改變街氢。
鼠標(biāo)懸停改變div的大小
<div class="box01"></div>
.box01 {width: 50px; height: 50px; background-color: red;}
.box01:hover {width: 300px; height: 300px; background-color: green;}

過渡動畫:
.box01 {width: 50px; height: 50px; background-color: red;}
.box01:hover {width: 300px; height: 300px; background-color: green; transition-property: all; transition-duration: 5s;}
/* transition-property: all 代表所有的要改變的屬性需要過渡睦袖,也可單獨(dú)寫一個
transition-duration: 5s 代表過渡需要的時長馅笙,此處是5秒
*
* */

過渡效果三要素:
1、必須要有發(fā)生變化的屬性
2烈和、必須告訴系統(tǒng)哪個屬性需要過渡效果
3皿淋、必須告訴系統(tǒng)變化的時長
4恬试、多個屬性過渡效果的格式:
transition-property: 屬性1 , 屬性2 , 屬性3 ;
transition-duration: 1的時長 , 2的時長 , 3的時長 ;

過渡模塊的其它屬性:
transition-delay:2s; 延遲2秒開始執(zhí)行動畫
transition-timing-function: ; 有五個取值疯暑,用于控制動畫過渡的不同效果

單個屬性過渡的連寫格式:A元素需要過渡
{transition: A 過渡時長 運(yùn)動速度 延遲時長;}

多個屬性過渡的連寫格式:A,B , C元素都需要過渡幻馁,中間以逗號隔開越锈。連寫可省略后面兩個參數(shù)瞪浸,前面兩個不能省略
{transition: A A過渡時長 A運(yùn)動速度 A延遲時長 , B B過渡時長 B運(yùn)動速度 B延遲時長 , C C過渡時長 C運(yùn)動速度 C延遲時長 ;}

需要過渡的屬性太多時的簡寫格式:{transition: all 5s;}

編寫過渡的步驟:
1、搭建基本界面
2钩蚊、修改認(rèn)為需要修改的屬性
3蹈矮、再去給需要過渡的元素添加過渡效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末泛鸟,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子刚操,更是在濱河造成了極大的恐慌再芋,老刑警劉巖菊霜,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異济赎,居然都是意外死亡鉴逞,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門司训,熙熙樓的掌柜王于貴愁眉苦臉地迎上來构捡,“玉大人,你說我怎么就攤上這事壳猜」椿眨” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵蓖谢,是天一觀的道長捂蕴。 經(jīng)常有香客問我闪幽,道長啥辨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任盯腌,我火速辦了婚禮溉知,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘腕够。我一直安慰自己级乍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布帚湘。 她就那樣靜靜地躺著玫荣,像睡著了一般。 火紅的嫁衣襯著肌膚如雪大诸。 梳的紋絲不亂的頭發(fā)上捅厂,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天,我揣著相機(jī)與錄音资柔,去河邊找鬼焙贷。 笑死,一個胖子當(dāng)著我的面吹牛贿堰,可吹牛的內(nèi)容都是我干的辙芍。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼羹与,長吁一口氣:“原來是場噩夢啊……” “哼故硅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起纵搁,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤契吉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后诡渴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捐晶,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年妄辩,在試婚紗的時候發(fā)現(xiàn)自己被綠了惑灵。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡眼耀,死狀恐怖英支,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情哮伟,我是刑警寧澤干花,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布妄帘,位于F島的核電站,受9級特大地震影響池凄,放射性物質(zhì)發(fā)生泄漏抡驼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一肿仑、第九天 我趴在偏房一處隱蔽的房頂上張望致盟。 院中可真熱鬧,春花似錦尤慰、人聲如沸馏锡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杯道。三九已至,卻和暖如春责蝠,著一層夾襖步出監(jiān)牢的瞬間党巾,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工玛歌, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留昧港,地道東北人。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓支子,卻偏偏與公主長得像创肥,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子值朋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容