鼠標移動上去,元素旋轉;web前端鼠標經過圖片凸起


.trans-rotate{
    -webkit-transition: transform .25s linear;
    -moz-transition: transform .25s linear;
    -o-transition: transform .25s linear;
    transition: transform .25s linear;
}/* 加上這個樣式后,才會在0.25秒內旋轉完畢。否則只會顯示立刻旋轉完的結果 */

.btnbg:hover{transform:rotate(360deg);}    /* 鼠標移上去后,旋轉*/

  在需要旋轉的元素上加上 class="btnbg trans-rotate"

 

 

web前端鼠標經過圖片凸起

在需要這種特效的img標簽上加上class=".img-aoqi"

.img-aoqi{
	-webkit-transition: all ease-out .5s;
    -o-transition: all ease-out .5s;
    transition: all ease-out .5s; 
    -ms-transition: all ease-out .5s;
}
.img-aoqi:hover{
	-webkit-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
    -ms-transform: scale(1.08)
}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM