本文实例为大家分享了CSS3过渡transition效果，供大家参考，具体内容如下
效果图：
实现代码：
transition.html
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Transition</title> <style> #block{ width:400px; height:300px; background-color:#69C; margin:0auto; transition:background-color1s,width0.5sease-out; -webkit-transition:background-color1s,width0.5sease-out; } #block:hover{ background-color:red; width:600px; } </style> </head> <body> <divid="block"> </div> </body> </html>
transitionDemo.html
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>TransitionDemo</title> <style> #wrapper{ width:1024px; margin:0auto; } .progress-bar-bg{ width:960px; /*background-color:aliceblue;*/ background-color:lightyellow; } .progress-bar{ height:40px; width:40px; background-color:#69C; border:1pxsolidlightyellow; border-radius:5px; } .progress-bar:hover{ width:960px; } #bar1{ -webkit-transition:width5slinear; /*-webkit-transition:width5ssteps(6,end);*/ /*-webkit-transition:width5sstep-start;*/ } #bar2{ -webkit-transition:width5sease; } #bar3{ -webkit-transition:width5sease-in; } #bar4{ -webkit-transition:width5sease-out; } #bar5{ -webkit-transition:width5sease-in-out; } </style> </head> <body> <divid="wrapper"> <p>linear</p> <divclass="progress-bar-bg"> <divclass="progress-bar"id="bar1"></div> </div> <p>ease</p> <divclass="progress-bar"id="bar2"></div> <p>ease-in</p> <divclass="progress-bar"id="bar3"></div> <p>ease-out</p> <divclass="progress-bar"id="bar4"></div> <p>ease-in-out</p> <divclass="progress-bar"id="bar5"></div> </div> </body> </html>
结果分析：鼠标移动上去后，会发生过渡动画。
以上就是本文的全部内容，希望对大家的学习有所帮助。
【CSS3过渡transition效果实例介绍】相关文章：
★ CSS知识总结