HTML5+CSS3实现的小风车-转动的童年
生活随笔
收集整理的這篇文章主要介紹了
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实现的小风车-转动的童年的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 64位服务器IIS不能识别32位fram
- 下一篇： string[x]:size 属性具有无