CSS3在hover下的效果

CSS3在hover下的幾種效果代碼分享，CSS3在滑鼠經過時的幾種效果集錦

效果一：360°旋轉修改rotate(旋轉度數)

* {
       transition:All 0.4s ease-in-out;
       -webkit-transition:All 0.4s ease-in-out;
       -moz-transition: #        -o-transition:All 0.4s ease-in-out;
   }
*:hover {
       transform:rotate(360deg);##  ##        -moz-transform:rotate(360deg);
       -o-transform:rotate(360deg);
      -ms-transform:ate
de); ：放大修改scale(放大的值)
* {
       transition:All 0.4s ease-in-out;
       -webkit-transition:All 0.4s ease-in-out     -webkit-transition:All 0.4s ease-in-out  > # -transition:All 0.4s ease-in-out;

       -o-transition:All 0.4s ease-in-out;

   }
*:hover {
         }
*:hover {
      transform:scale(1.2);
       -webkit-transform:scale(1.2);
      -moz-transform:scale(1.2);
       -o-transform:scale(1.2);#1  );
   }


效果三：旋轉放大修改rotate(旋轉度數) scale(放大值)

* {

       transition:All 0.4s ease-in -out;

       -webkit-transition:All 0.4s ease-in-out;
      -moz-transition:All 0.4s ease-in-out;

  -moz    in-out;

   }
*:hover {
       transform:rotate(360deg) scale(1.2);
       -webkit-transform:rotate(360g)      -webkit-transform:rotate(360g) )  moz-transform:rotate(360deg) scale(1.2);
       -o-transform:rotate(360deg) scale(1.2);
      rot#ms-transform:rot#ate(360de); }


效果四：上下左右移動修改translate(x軸,y軸)

* {
       transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;

       -moz-transition:All 0.4s ease-in-out;

       -o-transition:All 0.4s ease-in-out;# #   }
*:hover {

       transform:translate(0,-10px);

       -webkit-transform:translate(0,-10px);##  -10px);
       -o-transform:translate(0,-10px);
       -ms-transform:translate(0,-10px);
#   }# #CSS#CSS#CSS# hover下的效果相關文章請關注PHP中文網！