一个有趣的动画效果 

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

 

posted @ 2016-08-12 17:10  Churjan  阅读(121)  评论(0)  编辑  收藏  举报