CSS 3 中二維三維以及漸層過程簡單總結 及效果(動圖不好發)，css漸層

CSS 3 中二維三維以及漸層過程簡單總結 及效果(動圖不好發)，css漸層
一. 不動,地區內的變化(本質生產一張圖片)

      /*漸層

                1  長方形之漸層先定義長方形的寬高大小(好觀察最好加邊框)                                /*方向  顏色   位置*/                          利用  background-image: -webkit-linear-gradient(right top,red 50% ,blue 50%);       2 大圓中小圓變色  先做一個大圓                  /*變化圓心   從內到外依次填充顏色*/               background-image: -webkit-radial-gradient(50% 50%,yellow 20% ,red 50%, pink 55%, blue 100%);            /*也可以在矩形中以圓漸層*/        3    倒影

        .testb{

background-image: url(img/5.jpg);

height: 200px;

/*方向 間距  漸層*/

/*上 above  下below*/

/*1 倒影不佔文檔流的空間  層級高於文檔流

          2 倒影是針對標籤(寬高)進行的*/

          -webkit-box-reflect: above 20px -webkit-linear-gradient(top,rgba(0,0,0,0) 0% ,rgba(0,0,0,0.5) 100%);

}

         4      邊框比較寬並且4個邊框顏色不一樣,在相遇的角會形成顏色不一的三角形,(內容為0做圓後可以製作吃豆豆,)

 

         5     border-radius: 50px 0 50px 50px;用於切圓角

             橢圓的製作

                 .textG{

width: 200px;

height: 100px;

border-radius: 100px 100px 100px 100px/50px 50px 50px  50px;

 

 

}

  二.二維平面內的移動

           .test{ transform:rotate(0deg) translate(0px,0px) scale(1);(旋轉 平移 縮放 )

                  transition: all 3s ease .5s;(變化過程)}

              .test:hover{transform:rotate(720deg) translate(500px,300px) scale(2);}

 

                三種效果也可分開單獨用,並且不同先後順序效果不同

 

 三.三維空間內的動畫效果

             body{perspective:1000px;}/*在body中加透視點*/

             .父標籤{ transform-style:preserve-3d;}/*在其父標籤中開3D效果*/

               

           .test{ transform:rotate(0deg) translate(0px,0px) scale(1);(旋轉 平移 縮放 )              (沒動之前的初始值,可以不加,有預設值)

                  transition: all 3s ease .5s;(變化過程必須有)}

           .test:hover{transform:rotate(720deg) translate(500px,300px) scale(2);}(變化後的位置)

              /*在開3D效果下  可以設定Z軸效果*/

 

四.幀動畫

         @keyframes 動畫名(自取){

                0%(from){transform:…}

                ?%      {transform:…}

                ?%      {transform:…}

                100%(to){transform:…}

 

 

}

       .test:hover{

 

/*動畫效果的賦值方式和transition一樣*/

animation:movet 1s ease;

/*動畫執行的字數無限迴圈  infinite */

animation-iteration-count: infinite;

}