关于css旋转动画效果的简单实现

2017-03-23 14:18:51 css
下面小编就为大家带来一篇关于css旋转动画效果的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
我们可以通过css来做出动画效果,下面我为大家演示的是div的旋转,颜色过渡的动画

    <!DOCTYPE html>  
    <html lang="zh-cmn-Hans">  
    <head>  
    <meta charset="utf-8" />  
    <title></title>  
    <style>  
        a{       
            text-align:center;   
            line-height:100px;   
            transition:all 2s;   
            width:100px;   
            height:100px;   
            background:pink;   
            float:left;   
            border-radius:50%;   
        }   
        a:hover{   
            transition:all 2s;   
            background:red;   
            transform-origin:50 100;   
            transform:rotate(360deg);   
            border-radius:50%;   
               
        }   
    </style>  
    </head>  
    <body>  
    <h1>请将鼠标移动到下面的矩形上:</h1>  
    <a>  
        两秒旋转360   
    </a>  
    </body>  
    </html>  

效果自己测试,很绚丽哦!

以上这篇关于css旋转动画效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考