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

还在用IE8及其以下版本浏览器的童鞋们就不要尝试了。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!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>

　　

posted @   希-若愚  阅读(4367)  评论(14)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛