图片的旋转和伸缩

来源:互联网 发布:js正则表达式函数 编辑:程序博客网 时间:2024/04/30 20:57
<!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>
原创粉丝点击