Html5_animation动画

最新推荐文章于 2024-09-29 23:45:12 发布

绅V科技

最新推荐文章于 2024-09-29 23:45:12 发布

阅读量1.4k

点赞数 2

本文链接：https://blog.csdn.net/Android___vv/article/details/78176536

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        @keyframes rotate {
            from {
                /* 动画刚开始，角度 */
                transform: rotate(0deg);
            }
            to {
                /* 动画结束时，角度 */
                transform: rotate(360deg);
            }
        }

        @keyframes change {
            0% {
                /* 动画刚开始，div的宽高 */
                width: 200px;
                height: 200px;
            }
            50% {
                /* 动画执行一半时，div的宽高 */
                width: 100px;
                height: 400px;
            }
            100% {
                /* 动画执行完毕时，div的宽高 */
                width: 200px;
                height: 200px;
            }
        }
    </style>

</head>
<body>

<!-- animat_rotate：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: rotate 5s linear infinite; width: 200px;height:200px; margin: 50px 50px 50px 50px; background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg') no-repeat;"></div>

<!-- animat_rotate：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: change 5s linear infinite; width: 500px;height: 500px; margin: 100px 100px 100px 100px; background-color: red"></div>

</body>
</html>