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

最新推荐文章于 2022-09-28 15:56:25 发布

希尔

最新推荐文章于 2022-09-28 15:56:25 发布

阅读量2.3k

点赞数

分类专栏： HTML5 文章标签： html5 css class border 浏览器 ie

本文链接：https://blog.csdn.net/theskyofxier/article/details/7550514

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

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

希尔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3实现的小风车-转动的童年

#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); -webki
复制链接

扫一扫