css3动画之图片旋转
2024-08-28 16:40:29
直接上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <style> body { background:#ddd; } .rotate{ width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top; -webkit-background-size: 220px 220px; -moz-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; border-radius: 110px; -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; } .rotate:hover { cursor: pointer; -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } </style> </head> <body> <div class="rotate"></div> </body> </html>
OK!
最新文章
- JavaScript简单的tabel切换2
- 大气散射的demo
- BootStrap安装
- 修改windows系統下xampp中apache端口被其他程式占用的問題
- Codeforces Round #Pi (Div. 2) B. Berland National Library set
- SQL对like 操作中的特殊字符处理方法
- Hibernate缓存、组件、继承映射
- Page_Prerender介绍
- VirtualBox,Kernel driver not installed (rc=-1908)
- MVC 4
- Extjs6组件——Form大家族成员介绍
- XtraBackup物理备份 阿里云的Mysql备份方案
- dubbo refrence bean(服务引用)
- Java 小记 — RabbitMQ 的实践与思考
- UVA11020 Efficient Solutions
- CSS选择器【记录】
- lseek,fseek,fcntl,ioctl
- SQL SERVER 2008R2 执行大脚本文件时,管理工具提示“内存不足”的解决方法
- Python websocket
- Windows 系统cmd设置添加静态路由方式
热门文章
- pip 安装 MySQL-python 失败
- loadrunner --global schedule设置
- CSS3实现Loading效果
- wcf用svcutil导出泛型的元数据
- JDK和Tomcat环境变量,以及用MyEclipse新建Web Project测试Tomcat Server
- 【POJ2699】The Maximum Number of Strong Kings(二分,最大流)
- Android 记录和恢复ListView滚动的位置的三种方法
- Java使用正则表达式取网页中的一段内容(以取Js方法为例)
- List<;Map<;String,Object>;>;使用Java代码遍历
- hdu 5534 (完全背包) Partial Tree