欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3過渡transition效果實例介紹

  發(fā)布時間：2016-05-03 16:01:04   作者：佚名   我要評論
這篇文章主要為大家詳細介紹了CSS3過渡transition效果實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了CSS3過渡transition效果，供大家參考，具體內(nèi)容如下

效果圖：

實現(xiàn)代碼：

transition.html

XML/HTML Code復制內(nèi)容到剪貼板
  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>Transition</title>     
  6.     <style>     
  7.         #block {     
  8.             width: 400px;     
  9.             height: 300px;     
  10.             background-color: #69C;     
  11.             margin: 0 auto;     
  12.      
  13.             transition: background-color 1s, width 0.5s ease-out;     
  14.             -webkit-transition: background-color 1s, width 0.5s ease-out;     
  15.         }     
  16.         #block:hover {     
  17.             background-color: red;     
  18.             width: 600px;     
  19.         }     
  20.     </style>     
  21. </head>     
  22. <body>     
  23.     <div id="block">     
  24.      
  25.     </div>     
  26. </body>     
  27. </html>    

transitionDemo.html

XML/HTML Code復制內(nèi)容到剪貼板
  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>TransitionDemo</title>     
  6.     <style>     
  7.         #wrapper {     
  8.             width: 1024px;     
  9.             margin: 0 auto;     
  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;     
  20.      
  21.             border: 1px solid lightyellow;     
  22.             border-radius: 5px;     
  23.         }     
  24.         .progress-bar:hover {     
  25.             width: 960px;     
  26.         }     
  27.      
  28.         #bar1 {     
  29.             -webkit-transition: width 5s linear;     
  30.             /*-webkit-transition: width 5s steps(6, end);*/     
  31.             /*-webkit-transition: width 5s step-start;*/     
  32.         }     
  33.         #bar2 {     
  34.             -webkit-transition: width 5s ease;     
  35.         }     
  36.         #bar3 {     
  37.             -webkit-transition: width 5s ease-in;     
  38.         }     
  39.         #bar4 {     
  40.             -webkit-transition: width 5s ease-out;     
  41.         }     
  42.         #bar5 {     
  43.             -webkit-transition: width 5s ease-in-out;     
  44.         }     
  45.     </style>     
  46. </head>     
  47. <body>     
  48. <div id="wrapper">     
  49.     <p>linear</p>     
  50.     <div class="progress-bar-bg">     
  51.         <div class="progress-bar" id="bar1"></div>     
  52.     </div>     
  53.      
  54.     <p>ease</p>     
  55.     <div class="progress-bar" id="bar2"></div>     
  56.      
  57.     <p>ease-in</p>     
  58.     <div class="progress-bar" id="bar3"></div>     
  59.      
  60.     <p>ease-out</p>     
  61.     <div class="progress-bar" id="bar4"></div>     
  62.      
  63.     <p>ease-in-out</p>     
  64.     <div class="progress-bar" id="bar5"></div>     
  65. </div>     
  66. </body>     
  67. </html>   

結(jié)果分析：鼠標移動上去后，會發(fā)生過渡動畫。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

相關(guān)文章

  • 詳解css3 Transition屬性（平滑過渡菜單欄案例）

    這篇文章主要介紹了詳解css3 Transition屬性（平滑過渡菜單欄案例）的相關(guān)資料,需要的朋友可以參考下
    2017-09-05

  • CSS3中的元素過渡屬性transition示例詳解

    大家都知道過渡動畫是動畫的基礎(chǔ)，在學習動畫屬性之前，我們需要先了解過渡屬性transition，下面這篇文章通過示例代碼給大家詳細介紹了CSS3中的元素過渡屬性transition，有
    2016-11-30

  • CSS3使用transition屬性實現(xiàn)過渡效果

    CSS3中新增的transform屬性，可以實現(xiàn)元素在變換過程中的過渡效果，實現(xiàn)了基本的動畫。下面通過本文給大家介紹CSS3使用transition屬性實現(xiàn)過渡效果，需要的朋友參考下本文
    2018-04-18

最新評論