这篇文章主要讲解了“css旋转动画效果的实现方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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>
<h2>请将鼠标移动到下面的矩形上:</h2>
<a>
两秒旋转360
</a>
</body>
</html>
效果自己测试,很绚丽哦!
感谢各位的阅读,以上就是“css旋转动画效果的实现方法”的内容了,经过本文的学习后,相信大家对css旋转动画效果的实现方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。