CSS3动画（360度旋转、旋转放大、放大、移动）

最新推荐文章于 2021-06-03 11:12:01 发布

weixin_33937499

最新推荐文章于 2021-06-03 11:12:01 发布

阅读量185

点赞数

原文链接：https://my.oschina.net/TAOH/blog/914605

版权

为什么80%的码农都做不了架构师？>>>

<!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:orangered;
        }
        /*效果一：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>

上面那个是鼠标触碰旋转

下面这个是自动旋转

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3自动旋转效果</title>
    <link type="text/css" rel="stylesheet" href="css/basecss.css">

    <style>
        .swip_center_img {
            -moz-animation: rotate 2s infinite linear;
            -webkit-animation: rotate 2s infinite linear;
            animation: rotate 2s infinite linear;
            position: fixed;
            z-index: 9999;
            top: 66.6%;
            height: 4.3%;
            width: 6.4%;
            left: 30%;
        }

        @-moz-keyframes rotate {
            0% {
                -moz-transform: rotate(0deg);
                transform-origin:50% 50%;            }
            50% {
                -moz-transform: rotate(180deg);
                transform-origin:50% 50%;
            }
            100% {
                -moz-transform: rotate(360deg);
                transform-origin:50% 50%;
            }
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
                transform-origin:50% 50%;
            }
            50% {
                -webkit-transform: rotate(180deg);
                transform-origin:50% 50%;
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform-origin:50% 50%;
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
                transform-origin:50% 50%;
            }
            50% {
                -webkit-transform: rotate(180deg);
                transform-origin:50% 50%;

            }
            100% {
                transform: rotate(360deg);
                transform-origin:50% 50%;
            }
        }

    </style>
</head>
<body>
<div class="fengdie-components" id="xy">
</div>


    <img class="swip_center_img"  src="img/voicemail.png">

</body>
</html>

绕中心点旋转（选择不同的角度）要直接放在图片的标签上面

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
        transform-origin:50% 50%;            }
    50% {
        -moz-transform: rotate(180deg);
        transform-origin:50% 50%;
    }
    100% {
        -moz-transform: rotate(360deg);
        transform-origin:50% 50%;
    }
}