图片的旋转和伸缩

对你微笑纯属礼貌16

于 2017-10-08 13:43:31 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40060410/article/details/78174539

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @keyframes rotate {
            from{
                transform: rotate(0deg);
            }to{
            transform: rotate(360deg);
                         }
        }
        @keyframes changeWH {
            0%{
                width: 200px;
                height: 200px;
            }50%{
                width: 100px;
                             height:400px;
                         }100%{
            width: 200px;
            height: 200px;
                                                   }
        }
    </style>
</head>
<body>
    <div style="animation: rotate 6s linear infinite;
width: 200px;
height: 200px;
margin: 50px 50px;
background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg')"></div>
<div style="animation: changeWH 6s linear infinite;
width: 200px;
height: 200px;
margin: 50px;
background: chartreuse"></div>
</body>
</html>