js动画旋转与缩放

来源：互联网发布：翻译机知乎编辑：程序博客网时间：2024/05/24 03:29
<!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>
阅读全文
0 0