搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS3过渡transition效果实例介绍

发布时间：2023-01-04 14:10:58 来源：互联网
.
说了一千句一万句壮志豪言，不行动你还是碌碌无为；如果你行动了，哪怕只是一个小小的动作，你就有可能解决了温饱大计。

本文实例为大家分享了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>

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

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

以下您可能有感兴趣的文章:
标签： transition
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图