这篇文章主要为大家详细介绍了CSS3过渡transition效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了CSS3过渡transition效果,供大家参考,具体内容如下
效果图:
实现代码:
transition.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Transition</title> <style> #block { width: 400px; height: 300px; background-color: #69C; margin: 0 auto; transition: background-color 1s, width 0.5s ease-out; -webkit-transition: background-color 1s, width 0.5s ease-out; } #block:hover { background-color: red; width: 600px; } </style> </head> <body> <p id="block"> </p> </body> </html>
transitionDemo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TransitionDemo</title> <style> #wrapper { width: 1024px; margin: 0 auto; } .progress-bar-bg { width: 960px; /*background-color: aliceblue;*/ background-color: lightyellow; } .progress-bar { height: 40px; width: 40px; background-color: #69C; border: 1px solid lightyellow; border-radius: 5px; } .progress-bar:hover { width: 960px; } #bar1 { -webkit-transition: width 5s linear; /*-webkit-transition: width 5s steps(6, end);*/ /*-webkit-transition: width 5s step-start;*/ } #bar2 { -webkit-transition: width 5s ease; } #bar3 { -webkit-transition: width 5s ease-in; } #bar4 { -webkit-transition: width 5s ease-out; } #bar5 { -webkit-transition: width 5s ease-in-out; } </style> </head> <body> <p id="wrapper"> <p>linear</p> <p class="progress-bar-bg"> <p class="progress-bar" id="bar1"></p> </p> <p>ease</p> <p class="progress-bar" id="bar2"></p> <p>ease-in</p> <p class="progress-bar" id="bar3"></p> <p>ease-out</p> <p class="progress-bar" id="bar4"></p> <p>ease-in-out</p> <p class="progress-bar" id="bar5"></p> </p> </body> </html>
结果分析:鼠标移动上去后,会发生过渡动画。
以上就是本文的全部内容,希望对大家的学习有所帮助。
以上就是使用CSS3过渡transition效果实例介绍的详细内容,更多请关注php中文网其它相关文章!
已抢61931个
抢已抢110630个
抢已抢133267个
抢已抢32060个
抢已抢19334个
抢