js动画旋转与缩放

最新推荐文章于 2024-09-22 07:09:35 发布

xsw73692

最新推荐文章于 2024-09-22 07:09:35 发布

阅读量4.1k

点赞数 1

本文链接：https://blog.csdn.net/Rbh73692/article/details/78174766

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>动画</title>
    <style type="text/css">
        /* 上面的旋转动画代码 */
        /* 定义动画，动画名：animat_rotate，可以取任意名字 */
        /* 使用方式：animation: run 6s linear; */
        @keyframes tu{
            from{
                /*动画开始角度*/
                transform: rotate(0deg);
            }
            to {
                /*动画结束时角度*/
                transform: rotate(360deg);
            }
        }
        @keyframes er {
            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: tu 6s linear infinite;width:200px;height:200px;margin:64px 64px;
background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg')no-repeat;"></div>
<!-- animat_changeWH：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: er 20s linear infinite; width: 200px; height: 200px;margin: 64px 64px ; background-color: green;"></div>

</body>

</html>