本文共 1469 字，大约阅读时间需要 4 分钟。

CSS3在hover下的几种效果代码分享，CSS3在鼠标经过时的几种效果集锦

效果一：360°旋转 修改rotate(旋转度数)

* {

        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:rotate(360deg);         -webkit-transform:rotate(360deg);         -moz-transform:rotate(360deg);         -o-transform:rotate(360deg);         -ms-transform:rotate(360deg);     }

效果二：放大 修改scale(放大的值)

* {         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:scale(1.2);         -webkit-transform:scale(1.2);        -moz-transform:scale(1.2);         -o-transform:scale(1.2);         -ms-transform:scale(1.2);     }

效果三：旋转放大 修改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;         -o-transition:All 0.4s ease-in-out;     } *: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);     }

效果四：上下左右移动 修改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);         -moz-transform:translate(0,-10px);         -o-transform:translate(0,-10px);         -ms-transform:translate(0,-10px);     }

转载地址：https://cplvfx.blog.csdn.net/article/details/93629869 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！