在之前的課程中,實現CSS3過渡效果,我們都是僅僅針對一個CSS屬性來操作。其實在CSS3中,我們可以使用transition屬性同時對多個CSS屬性進行實現平滑過渡效果。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>深入了解transition屬性</title> <style type="text/css"> div { display:inline-block; width:100px; height:100px; border-radius:0; background-color:#14C7F3; transition-property:border-radius,background-color; transition-duration:1s ; transition-timing-function:linear; transition-delay:2s; } div:hover { border-radius:50px; background-color:red; } </style> </head> <body> <div></div> </body> </html>
在浏覽器預覽效果如下:
分析:
當鼠標移動到div元素上方時,div元素會在1s時間內同時對border-radius和background-color這兩個屬性產生過渡效果。
如果想要使用transition屬性同時對多個屬性進行實現平滑過渡效果,只需要在transition-property屬性添加多個屬性名即可,其中屬性名之間用英文逗號隔開。