快捷导航
查看: 85|回复: 0

[CSS3实例代码] 鼠标悬浮电风扇旋转效果

[复制链接]
发表于 2017-1-9 23:27:51 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-1-9 23:27 编辑

鼠标悬浮电风扇旋转效果:
分享一个代码实例,它利用css3实现了鼠标悬浮电风扇旋转效果。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
#ant {
  width: 200px;
  height: 200px;
  background: yellow;
  position: absolute;
  border-radius: 100px;
  transition: transform 5s;
}
#ant div {
  width: 100px;
  height: 100px;
  float: left;
  border-radius: 50px;
  background: white;
}
#ant:hover {
  /*开始旋转 (360*12圈)4320deg(度) */
  transform: rotate(4320deg);
}
</style>
</head>
<body>
  <div id="ant">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</body>
</html>

上面的代码相对比较简单,相关属性可以参阅相关阅读。
相关阅读:
(1).border-radius可以参阅CSS3 border-radius圆角一章节。
(2).transition可以参阅CSS3 transition一章节。
(3).transform: rotate()可以参阅transform: rotate()用法介绍一章节。

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-3-31 02:40 , Processed in 0.074896 second(s), 23 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表