css3 transition屬性

時間 2019-12-08

原文原文鏈接

最近打算學習css3知識，以爲css3寫出來的效果好炫好酷，以前一直想要學習來着。可能以前的決心，毅力，耐心不夠，因此想要重整起來，放下浮躁的心態，一步一個腳印，踏踏實實的來學習。css

首先學習的是css3 transition屬性，該屬性的定義爲從一個屬性值平滑過渡到另外一個屬性值。html

格式爲：transition:<過分屬性名> <過分時間> <過分模式>，或
transition-property:<過分屬性名>
transition-duration:<過分時間>
transition-timing-function:<過分模式>jquery

注意，因爲各瀏覽器之間的兼容性差別，針對各瀏覽器寫的css3樣式都要加上前綴，如：css3

-webkit-: /*chrome,safari*/

-moz-: /*firebox*/

-ms: /*IE*/

-o-: /*opera*/

以下，舉個例子，代碼示例：web

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>我的網站首頁</title>
  <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js"></script>
  <style>
    .block{
      width:400px;
      height:400px;
      background-color:blue;
      -webkit-transition: background-color 3s;
    }
    .block:hover{
      background-color:red;
    }

    .progress-bar{
      width: 40px;
      height: 40px;
      background-color: blue;

    }
    .progress-bar:hover{
      width: 960px;
    }
    #bar1{
      -webkit-transition: width 3s ease;
    }
    #bar2{
      -webkit-transition: width 3s linear;
    }
    #bar3{
      -webkit-transition: width 3s ease-in;
    }
    #bar4{
      -webkit-transition: width 3s ease-out;
    }
    #bar5{
      -webkit-transition: width 3s ease-in-out;
    }

    #expermient{
      -webkit-perspective:800px;
      -webkit-perspective-origin:50% 50%;
      -webkit-transform-style:preserve-3d;
    }
    #blocks{
      width: 500px;
      height: 500px;
      background-color: blue;
      margin: 0 auto;
      -webkit-transform:rotateX(45deg);
    }

    .hw-cbg.on p{
      padding:0px 0 0 30px; 
      -webkit-transition:padding-left 2s ease;
    }
    .hw-cbg p{
      padding: 30px 0 0 0;  
    }

    .animation{
      width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
    }
    @-webkit-keyframes mymove{
      0% {margin-left: 0px;background-color: blue;}
      50% {margin-left: 30px;}
      100% {margin-left: 60px;}
    }
  </style>
 </head>
 <body>
  <!--說明：
   transition:從一個屬性值平滑過渡到另外一個屬性值，格式爲：transition:<過分屬性名> <過分時間> <過分模式>，或
   transition-property:<過分屬性名>
   transition-duration:<過分時間>
   transition-timing-function:<過分模式>
   -->
    <div class='block'></div>

    <div class="wrape">
        <p>ease</p>
        <div class="progress-bar" id="bar1"></div>

        <p>linear</p>
        <div class="progress-bar" id="bar2"></div>

        <p>ease-in</p>
        <div class="progress-bar" id="bar3"></div>

        <p>ease-out</p>
        <div class="progress-bar" id="bar4"></div>

        <p>ease-in-out</p>
        <div class="progress-bar" id="bar5"></div>
    </div>

    <div id='expermient'>
       <div id="blocks"></div>
    </div>

    <div class="hw-cbg">
        <p>在節奏緊張的都市生活中，高效便攜會讓您的生活化繁爲簡。HUAWEI MateBook配備12英寸屏幕的<br>
          金屬機身，重量僅爲640g，厚度低至6.9mm。內在強大，彰顯銳意與品質的交融；<br>
          輕薄時尚，是您工做生活的趁心伴侶。</p>
    </div>
    <script>
     $(document).ready(function(){
          $('.hw-cbg').addClass('on');
     })
    </script>

    <div class="animation"></div>
 </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。