鼠标放div上,旋转4圈,旋转3分钟的代码:

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:3s ease-out;

-moz-transition:3s ease-out; /* Firefox 4 */

-webkit-transition:3s ease-out; /* Safari and Chrome */

-o-transition:3s ease-out; /* Opera */

}

div:hover

{

width:200px;

height:200px;

transform:rotate(1440deg);

-moz-transform:rotate(1440deg); /* Firefox 4 */

-webkit-transform:rotate(1440deg); /* Safari and Chrome */

-o-transform:rotate(1440deg); /* Opera */

}

</style>

</head>

<body>

<div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</div>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

 备注:4圈就是 1440deg,如果是1圈就是360deg,如果是倒着转1圈就是-360deg!


上一篇 下一篇

用户登录


姓  名:
密  码:
     注册


网站咨询

我叫王小恺,专业从事嘉兴网站建设,嘉兴百度推广,嘉兴网站制作,嘉兴技术外包,嘉兴网站优化,已经有4年经验,与多家网络公司合作提供技术支持,联系电话:18867653334.我们竭诚为您服务!


随机文章

  • 每周电影《你好,疯子!》,万茜的多重人生电影刚开始其实给人的第一映像是模仿电锯惊魂,随着剧... 查看详情
  • 2017年开张了,欢迎各位咨询嘉兴网站建设关键词优化 很快,一个年假就走了,今年有幸的过年去了趟韩国,... 查看详情
  • 2016年的总结和体会2016年是我的本命年,也是我自主生存的第一年,什... 查看详情
  • [转]知识经济的崛起表明互联网让信息重新走向付费在今天知识经济和内容变现几乎是一对最热门的话题,几... 查看详情
  • 微信公众账号,微官网免费创建大家是否还在烦恼,我只是想做个展示型的微官网而已,... 查看详情

photoshop_cs6绿色版 工具 photoshop_cs6绿色...
ftp管理工具 工具 ftp管理工具...
dreamweaver_cs5绿色版 工具 dreamweaver_cs5...
硕思闪客精灵破解 工具 硕思闪客精灵破解...
css3鼠标放在div上产生旋转效果 html+div css3鼠标放在div上产生旋...
thinkcmf首页调用文章栏目名称 thinkcmf 本人最近发现thinkcmf挺...
如何正确识别Baiduspider移动ua 文档 另外需要强调的是,对于robo...
2017年开张了,欢迎各位咨询嘉兴网站建设关键词优化 随笔 很快,一个年假就走了,今年有...

友情链接





Copyright © 2015 - 2017王小恺博客 & 版权所有
嘉兴网络优化,嘉兴网站制作,嘉兴网站建设,嘉兴网络公司,咨询热线:18867653334(王)我们竭诚为您服务!