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

我们可以通过css来做出动画效果,下面我为大家演示的是div的旋转,颜色过渡的动画

XML/HTML Code复制内容到剪贴板 <!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旋转动画效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

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