|
|
| Line 1: |
Line 1: |
| - | <!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>
| |
| - | <divid="windmill">
| |
| - | <divclass="top ala"></div><divclass="top topIn alaIn"></div>
| |
| - | <divclass="right ala"></div><divclass="right rightIn alaIn"></div>
| |
| - | <divclass="bottom ala"></div><divclass="bottom bottomIn alaIn"></div>
| |
| - | <divclass="left ala"></div><divclass="left leftIn alaIn"></div>
| |
| - | </div>
| |
| - | </body>
| |
| - | </html>
| |
"
