HTML5+CSS3实现的小风车-转动的童年

还在用IE8及其以下版本浏览器的童鞋们就不要尝试了。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#windmill{width:160px;height:160px; position:relative;-moz-transition:-moz-transform 2s ease-in-out;-webkit-transition:-webkit-transform 2s ease-in-out;-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);
}
#windmill:hover{-moz-transform:rotate(960deg);  -webkit-transform:rotate(960deg);
}
#windmill div.top{width:40px;height:80px;left:40px;top:0px;border-top-left-radius:40px;
}
#windmill div.right{width:80px;height:40px;left:80px;top:40px;border-top-right-radius:40px;
}
#windmill div.bottom{width:40px;height:80px;left:80px;top:80px;border-bottom-right-radius:40px;
}
#windmill div.left{ width:80px;height:40px;left:0px;top:80px;border-bottom-left-radius:40px;
}
#windmill div.ala{position:absolute;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:rgba(0,0,255,0.4);  border:1px solid rgba(0,0,255,0.5);-moz-transition:background-color 1s linear;-webkit-transition:background-color 1s linear;
}
#windmill div.ala:hover{background-color:#00F;
}
.alaIn{position:absolute;background:rgba(255,255,255,0.7);  -moz-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-transition:background-color 1s linear;-webkit-transition:background-color 1s linear;left:0;top:0;
}
.alaIn:hover{background-color:rgba(255,255,255,0.9);
}
.topIn{border-bottom-left-radius:40px;
}
.rightIn{border-top-left-radius:40px;
}
.bottomIn{border-top-right-radius:40px;
}
.leftIn{border-bottom-right-radius:40px;
}
</style>
</head>
<body>
<div id="windmill"><div class="top ala"></div><div class="top topIn alaIn"></div><div class="right ala"></div><div class="right rightIn alaIn"></div><div class="bottom ala"></div><div class="bottom bottomIn alaIn"></div><div class="left ala"></div><div class="left leftIn alaIn"></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/deng303359/archive/2012/05/09/windwill.html

HTML5+CSS3实现的小风车-转动的童年相关推荐

html5风车转圈,HTML5+CSS3实现的小风车-转动的童年
还在用IE8及其以下版本浏览器的童鞋们就不要尝试了.
CSS3实现一个小风车
前言用CSS3实现了一个小风车的效果效果代码 <!DOCTYPE html> <html lang="en"><head><meta ...
HTML5+CSS3小实例：炫彩的发光字特效
前言: 今天我们向大家精选了一款HTML5+CSS3文字特效,文字特效有超酷的动画类型,不多说,一起来看看. 描述: 这款文字特效既有倒影的效果,又有随机的颜色,看起来非常的炫酷.全文基于 HTML5 ...
前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
小猿圈WEB前端之HTML5+CSS3面试题（一）
越来越多人喜欢前端岗位,毕业季已经悄然来临,很多毕业生面临找工作,那你们在狂欢快乐最后恋恋不舍之际,是否想着过几天招工作的危机.如果想要毕业之后,走向前端的岗位,那看到小编的文章后好好做一下这套题,今 ...
html5行走的机器人,html5 css3实例教程一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
HTML5+CSS3小实例：后台管理系统的侧边导航栏
HTML5+CSS3做一个后台管理系统的侧边导航栏,点击三条杠,可以收起或展开侧边导航栏.收起时,图标变大,文本在图标下方,管理员头像右侧的欢迎语隐藏:展开时图标变小,文本在图标的右侧显示,管理员头像 ...
HTML5+CSS3小实例：简约不简单的社交分享按钮
HTML5+CSS3做一组简约不简单的社交分享按钮,字体图标库用到的是 font-awesome,鼠标悬停,图标变小,边框出现,然后边框倾斜并加粗,过程伴随动画,就这样,大功告成,是不是很简单? 效果 ...
HTML5+CSS3小实例：全屏导航栏菜单
HTML5+CSS3实现全屏导航栏菜单,悬停在右上角的小图标,点击以圆形扩散的方式绽开全屏导航栏,这种方式的导航栏很吸睛,运用也越来越广,赶紧学起来呀! 效果: 源码: <!DOCTYPE ht ...

HTML5+CSS3实现的小风车-转动的童年

HTML5+CSS3实现的小风车-转动的童年相关推荐

最新文章

热门文章