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

HTML文章/教程1年前 (2022)发布勤奋小助

0 0

还在用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 >
	<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
本文来源爱码网，其版权均为原网址所有与本站无关，文章内容系作者个人观点，不代表本站对观点赞同或支持。如需转载，请注明文章来源。