CSS3过渡transition效果实例介绍

互联网
说了一千句一万句壮志豪言，不行动你还是碌碌无为；如果你行动了，哪怕只是一个小小的动作，你就有可能解决了温饱大计。

本文实例为大家分享了CSS3过渡transition效果，供大家参考，具体内容如下

效果图：

实现代码：

transition.html

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Transition</title>
  6. <style>
  7. #block{
  8. width:400px;
  9. height:300px;
  10. background-color:#69C;
  11. margin:0auto;
  13. transition:background-color1s,width0.5sease-out;
  14. -webkit-transition:background-color1s,width0.5sease-out;
  15. }
  16. #block:hover{
  17. background-color:red;
  18. width:600px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <divid="block">
  25. </div>
  26. </body>
  27. </html>

transitionDemo.html

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>TransitionDemo</title>
  6. <style>
  7. #wrapper{
  8. width:1024px;
  9. margin:0auto;
  10. }
  11. .progress-bar-bg{
  12. width:960px;
  13. /*background-color:aliceblue;*/
  14. background-color:lightyellow;
  15. }
  16. .progress-bar{
  17. height:40px;
  18. width:40px;
  19. background-color:#69C;
  21. border:1pxsolidlightyellow;
  22. border-radius:5px;
  23. }
  24. .progress-bar:hover{
  25. width:960px;
  26. }
  28. #bar1{
  29. -webkit-transition:width5slinear;
  30. /*-webkit-transition:width5ssteps(6,end);*/
  31. /*-webkit-transition:width5sstep-start;*/
  32. }
  33. #bar2{
  34. -webkit-transition:width5sease;
  35. }
  36. #bar3{
  37. -webkit-transition:width5sease-in;
  38. }
  39. #bar4{
  40. -webkit-transition:width5sease-out;
  41. }
  42. #bar5{
  43. -webkit-transition:width5sease-in-out;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <divid="wrapper">
  49. <p>linear</p>
  50. <divclass="progress-bar-bg">
  51. <divclass="progress-bar"id="bar1"></div>
  52. </div>
  54. <p>ease</p>
  55. <divclass="progress-bar"id="bar2"></div>
  57. <p>ease-in</p>
  58. <divclass="progress-bar"id="bar3"></div>
  60. <p>ease-out</p>
  61. <divclass="progress-bar"id="bar4"></div>
  63. <p>ease-in-out</p>
  64. <divclass="progress-bar"id="bar5"></div>
  65. </div>
  66. </body>
  67. </html>

结果分析：鼠标移动上去后，会发生过渡动画。

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能有感兴趣的文章
css3 中translate和transition的如何使用方法
浅析CSS3 中的 transition，transform，translate之间区别和作用
css简单动画之transition属性详解
CSS3之transition如何实现下划线的示例代码
详解css3 Transition属性（平滑过渡菜单栏案例）