CSS3 动画-- 鼠标移上去，div 会旋转、放大、移动

超、凢脫俗 2022-05-10 21:56 343阅读 0赞

原文出处：[https://www.cnblogs.com/arealy/p/7737051.html][https_www.cnblogs.com_arealy_p_7737051.html]  
效果图：  
![70][]

原码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            div{
                width:120px;
                height:120px;
                line-height:120px;
                margin: 20px;
                background-color: #5cb85c;
                float: left;
                font-size: 12px;
                text-align: center;
                color:#000;
            }
            /*效果一：360°旋转 修改rotate(旋转度数)*/
            .img1 {
                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;
            }
            .img1:hover {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
            }
    
            /*效果二：放大 修改scale(放大的值)*/
            .img2 {
                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;
            }
    
            .img2: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(放大值)*/
            .img3 {
                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;
            }
    
            .img3: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轴)*/
            .img4 {
                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;
            }
    
            .img4: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);
            }
        </style>
    </head>
    <body>
        <div class="img1">360°旋转 </div>
        <div class="img2">放大</div>
        <div class="img3">旋转放大</div>
        <div class="img4">上下左右移动 </div>
    </body>
    </html>

[https_www.cnblogs.com_arealy_p_7737051.html]: https://www.cnblogs.com/arealy/p/7737051.html
[70]: /images/20220511/eb69dcd8e82c494981a347ebbafcb4a9.png