css3动画学习之 transform

css3动画学习之 transform

属性说明

transform 旋转的角度 0-180

scale 放大的比例

例子 transform: rotate(60deg) scale(1.5); //旋转60°，放大1.5倍

代码，直接可运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画旋转</title>
</head>
<body>
    <div class="test1"></div>
</body>


<style>
.test1{
    width: 120px;
    height: 120px;
    background: salmon;
    animation-name: dh;
    animation-iteration-count: infinite;
    animation-duration:4.5s;
    position: absolute;
    top: 70%;
    left: 10%;
    animation-direction: alternate;
}

@keyframes dh{
    0%{
        background: salmon;
        top: 65%;
        left: 18%;
        transform: rotate(0deg) scale(1.0);
    }

    20%{
        background: orangered;
        top: 60%;
        left: 25%;
        transform: rotate(60deg) scale(1.3);
        border-radius: 10%;
    }

    40%{
        background: gold;
        top: 55%;
        left: 35%;
        transform: rotate(120deg) scale(1.6);
        border-radius: 20%;
    }

    60%{
        background: forestgreen;
        top: 50%;
        left: 44%;
        transform: rotate(180deg) scale(1.4);
        border-radius: 30%;
    }

    80%{
        background: slateblue;
        top: 44%;
        left: 50%;
        transform: rotate(260deg) scale(1.2);
        border-radius: 20%;
    }

    100%{
        background: burlywood;
        top: 39%;
        left: 65%;
        transform: rotate(360deg) scale(1.0);
        border-radius: 10%;
    }
}
</style>
</html>

越来越好。

发布了114 篇原创文章 · 获赞 67 · 访问量 12万+

私信关注

css3动画学习之 transform

猜你喜欢