js动画旋转与缩放

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>


<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>

<div style="animation: er 20s linear infinite; width: 200px; height: 200px;margin: 64px 64px ; background-color: green;">div>

body>

html>

你可能感兴趣的:(js动画旋转与缩放)