一个有趣的动画效果

最新推荐文章于 2022-03-22 16:53:54 发布

weixin_30421525

最新推荐文章于 2022-03-22 16:53:54 发布

阅读量48

点赞数

原文链接：http://www.cnblogs.com/churjan/p/5765708.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                margin: 100px auto;
                background-color:rgba(255,0,0,.7);
                border-radius: 50%;
                transition: all 2s;
                transform-origin: center;
            }
            div:hover{
                transform: rotate(66666deg) translate(10%, 10%)  ;
                background-color: rgba(0,0,255,.7);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>