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

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

過渡

簡單的來講，就是元素由一種狀態（樣式）轉變到另一種時的過程，可以稱之為過渡。我們來口頭舉個例子：

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

語法：

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

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

其實不然，我們將其屬性和挨個分析一下：

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

transition-duration：定義過渡效果花費的時間；值可以是1s,2s等。秒數越大，動畫執行的越慢。

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

transition-delay：規定過渡效果何時開始。默認是 0。也可以是具體的秒數，1s,2s等。

最后使用代碼舉個例子吧：

有如下div元素：

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

css樣式為：

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

運行效果如圖所示：

往期精彩

CSS3的幾個變形案例……

2020-11-18

jsp中使用cookie時報錯……

2020-11-17

Java中的TreeSet集合會自動將元素升序排序

2020-11-16

“老師，請您多關注一下我吧！！！”

2020-11-15

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

2020-11-14

Vector是線程安全的？

2020-11-13

點分享

點點贊

點在看

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。