首页 > 开发 > CSS > 正文

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

2024-07-11 08:33:52
字体:
来源:转载
供稿:网友

我们可以通过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旋转动画效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表