有時候我們在網頁中可能會看到這樣的效果,當滑鼠放到某些文字或圖像上的時候會發生一些變化,這其實就是過渡,這麼說來比較抽象,那麼,下面就來介紹一下關於css3實現過渡的動畫效果。
css3實現過渡是離不開transition屬性的,transition是網頁上的過渡動畫,變化的逐漸過渡效果,簡稱過渡動畫。
那麼,接下來就來看看css3的transition屬性具體怎麼實現過渡效果。
首先我們來看看transition屬性的定義與用法:
transition 屬性是一個簡寫屬性,用來設定四個過渡屬性。
transition-property:規定設定過渡效果的 CSS 屬性的名稱。
transition-duration:規定完成過渡效果需要多少秒或毫秒。
transition-timing-function:規定速度效果的速度曲線。
transition-delay:定義過渡效果何時開始。
在看完了簡單介紹的transition屬性定義和用法之後。
現在我們具體來看一個css3實現過渡效果的程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小效果</title> <style type="text/css"> /*通配符重置浏览器默认的两个值, 对本文没有太大影响,不知道可以无视*/ *{ margin: 0; padding: 0; } .div1{ width: 400px; height: 100px; padding-top: 20px; line-height: 100px; margin:200px auto 0; text-align: center; font-size: 40px; font-weight: bold; font-family: "华文行楷"; background: #000; color:#F60; transition-property: all;/*变化的东西。all是所有*/ transition-duration: 1s;/*变化过程的时间*/ transition-timing-function: linear;/*linear是匀速变化*/ transition-delay: 0s;/*没有延迟变化*/ /*下面的是简写属性*/ /* transition:all 1s linear 0s; */ } .div1:hover{ text-shadow: 0px 0px 2px #fff, 0px -3px 3px #1EB, 0px -6px 4px #01DEFD, 0px -9px 5px #0BF, 0px -12px 6px #08F; } </style> </head> <body> <div>PHP中文网火焰字</div> </body> </html>
最後我們來看css3實現過渡的效果:
css3實作過渡效果過程:
css3實作過渡效果結果:
關於transition屬性更多用法可以參考css3學習手冊。
相關建議:
使用 CSS3 動畫實現的 3D 圖片過渡特效_html/css_WEB-ITnose
以上是css3如何實現過渡動畫的效果? css3過渡效果的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!