css3鼠标经过的一些简单的效果

1.鼠标悬停图片变大

:hover {

  -webkit-transform: scale(1.1);

  -moz-transform: scale(1.1);

  -o-transform: scale(1.1);

  -ms-transform: scale(1.1);

}

缓慢变化需要在包住图片的外层加上:-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;

变大不超出的话就加上overflow:hidden;

2.鼠标悬停整体旋转

:hover {

  transform:rotate(360deg);

  -webkit-transform:rotate(360deg);

  -moz-transform:rotate(360deg);

  -o-transform:rotate(360deg);

   -ms-transform:rotate(360deg);

}

缓慢变化需要在包住图片的外层加上: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;

3.鼠标悬停整体旋转放大

:hover {

  transform:rotate(360deg) scale(1.2);  

   -webkit-transform:rotate(360deg) scale(1.2);  

   -moz-transform:rotate(360deg) scale(1.2);  

   -o-transform:rotate(360deg) scale(1.2);    

  -ms-transform:rotate(360deg) scale(1.2);

}

缓慢变化需要在包住图片的外层加上: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;

4.鼠标悬停整体上升

:hover {

  transform:translate(0,-10px);  

   -webkit-transform:translate(0,-10px);    

  -moz-transform:translate(0,-10px);    

  -o-transform:translate(0,-10px);    

  -ms-transform:translate(0,-10px);

}

缓慢变化需要在包住图片的外层加上: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里面):box-shadow:0px 5px 20px #ccc;

posted @ 2017-12-21 15:34  wpTing  阅读(2543)  评论(0)    收藏  举报