<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>CSS3鼠标悬停360度旋转效果</title> <style> * { margin:0; padding:0; list-style:none; } body { background:#1F1F1F; } .zzsc { width: 220px; height: 220px; margin: 0 auto; background: red; -webkit-background-size: 220px 220px; -moz-background-size: 220px 220px; background-size: 220px 220px; border-radius: 100px; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } .zzsc:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } </style> </head> <body> <div class="zzsc"></div> <div style="text-align:center;clear:both;"> </div> </body> </html>
CSS3鼠标悬停360度旋转效果
2023-09-15
64
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS3鼠标悬停360度旋转效果
目录
相关文章
|
1月前
|
前端开发
|
1月前
|
前端开发
|
1月前
|
前端开发
Ubuntu
Linux
|
1月前
|
前端开发
容器
|
3月前
|
前端开发
|
3月前
|
前端开发
UED
|
3月前
|
前端开发
|
3月前
|
前端开发
|
5月前
|
前端开发
搜索推荐
UED
|
4月前
|
前端开发