今天小编跟大家讲解下有关CSS3过渡transition效果实例介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3过渡transition效果实例介绍 的相关资料，希望小伙伴们看了有所帮助。
本文实例为大家分享了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:lightyellow; } .progress-bar{ height:40px; width:40px; background-color:#69C; border:1pxsolidlightyellow; border-radius:5px; } .progress-bar:hover{ width:960px; } #bar1{ -webkit-transition:width5slinear; } #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>结果分析：鼠标移动上去后，会发生过渡动画。
以上就是本文的全部内容，希望对大家的学习有所帮助。
来源：爱蒂网
