CSS3在鼠标经过时的几种效果合集

最新推荐文章于 2024-06-28 09:45:00 发布

AQMAX

最新推荐文章于 2024-06-28 09:45:00 发布

阅读量1.4k

点赞数 1

分类专栏： web前端文章标签： css3 html

web前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

效果一：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);
    }