大家好，歡迎來到雄雄的小課堂，上一期我們分享了幾個(gè)CSS變形案例，大家還記得有哪幾個(gè)嗎？原文在這里：CSS3的幾個(gè)變形案例……

今天，我們來看看CSS的過渡：

過渡

簡(jiǎn)單的來講，就是元素由一種狀態(tài)（樣式）轉(zhuǎn)變到另一種時(shí)的過程，可以稱之為過渡。我們來口頭舉個(gè)例子：

某div初始的寬和高均為200px,背景色為紅色（red）,當(dāng)鼠標(biāo)懸浮時(shí)，我們想讓其原地轉(zhuǎn)一圈，背景色為黃色(yellow),那么由紅色轉(zhuǎn)到黃色的這個(gè)過程，即過渡……

語法：

transition: transition-property transition-duration transition-timing-function transition-delay;

大部分人一看這個(gè)語法，心理難免咯噔一下，我去，這么多啊……

其實(shí)不然，我們將其屬性和挨個(gè)分析一下：

transition-property：規(guī)定應(yīng)用過渡的 CSS 屬性的名稱；值可以width,height,background-color等，也可以是all,一般為了方便都寫all。

transition-duration：定義過渡效果花費(fèi)的時(shí)間；值可以是1s,2s等。秒數(shù)越大，動(dòng)畫執(zhí)行的越慢。

transition-timing-function：規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。其余的值還有: linear ????? （勻速執(zhí)行），ease（規(guī)定慢速開始，然后變快，然后慢速結(jié)束），ease-in（規(guī)定以慢速開始的過渡效果），ease-out（規(guī)定以慢速結(jié)束的過渡效果），ease-in-out（規(guī)定以慢速開始和結(jié)束的過渡效果）

transition-delay：規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。也可以是具體的秒數(shù)，1s,2s等。

最后使用代碼舉個(gè)例子吧：

有如下div元素：

<div?id="div6">6</div>

css樣式為：

#div6{transition: all 1s?ease-in-out;}#div6:hover{transform: translate(10px,10px) rotate(360deg);background:beige;}

運(yùn)行效果如圖所示：

往期精彩

CSS3的幾個(gè)變形案例……

2020-11-18

jsp中使用cookie時(shí)報(bào)錯(cuò)……

2020-11-17

Java中的TreeSet集合會(huì)自動(dòng)將元素升序排序

2020-11-16

“老師，請(qǐng)您多關(guān)注一下我吧！！！”

2020-11-15

晨讀，難道只是為了完成任務(wù)而讀的嗎？

2020-11-14

Vector是線程安全的？

2020-11-13

點(diǎn)分享

點(diǎn)點(diǎn)贊

點(diǎn)在看

總結(jié)

以上是生活随笔為你收集整理的CSS3中的动画示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。