®
纯HTML/CSS做的Windows图标
<style>#windows .canvas {
background: #fff;
}
#windows .icon {
left:193px;
position: absolute;
top:20px;
-moz-transform: rotate(16deg);
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
.window-e1,
.window2,
.window3,
.window4 {
position:absolute;
}
.window-e1 {
border-radius:100px/67px;
clip: rect(0px 77px 67px 0);
height: 67px;
left: 9px;
position: absolute;
top: 11px;
width:102px;
}
.window-e2 {
height: 85px;
left: 0;
position: absolute;
top:27px;
-moz-transform:skewy(-30deg);
-webkit-transform:skewy(-30deg);
transform:skewy(-30deg);
width:25px;
}
.window-e3 {
height: 41px;
left: 24px;
position: absolute;
top: 64px;
width: 62px;
}
.window-e4 {
background: #fff;
opacity:1;
border-radius:100px/67px;
clip:rect(0 77px 12px 16px);
height: 67px;
left: 9px;
position: absolute;
top: 96px;
width:100px;
}
.window1 {
left:0;
position: absolute;
top:0;
}
.window1 .window-e1,
.window1 .window-e2,
.window1 .window-e3 {
background: #d53407;
}
.window2 {
left: 183px;
position:absolute;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: 119px;
}
.window2 .window-e1,
.window2 .window-e2,
.window2 .window-e3 {
background: #7dae1c;
}
.window3 {
left: 0;
position: absolute;
top:95px;
}
.window3 .window-e1,
.window3 .window-e2,
.window3 .window-e3 {
background: #3576ac;
}
.window4 {
left: 183px;
position:absolute;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: 214px;
}
.window4 .window-e1,
.window4 .window-e2,
.window4 .window-e3 {
background: #fac112;
}
#windows .glow {
background: -moz-gradient(radial, 50% 50%, 20, 50% 50%, 100, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background: -webkit-gradient(radial, 50% 50%, 20, 50% 50%, 100, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
height: 214px;
position: absolute;
width:182px;
}
#windows .registered {
left:190px;
position: absolute;
-moz-transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
transform: rotate(-16deg);
top:160px;
}
#windows .shadow1,
#windows .shadow2,
#windows .shadow3 {
background: #ccc;
}
.window1 .window-e4,
.window3 .window-e4 {
top:101px;
}
.window1 .shadow1,
.window3 .shadow1 {
left: 65px;
clip: rect(0px 30px 94px 21px);
-moz-transform: skewy(30deg);
-webkit-transform: skewy(30deg);
transform: skewy(30deg);
top: 16px;
}
.window1 .shadow2,
.window3 .shadow2 {
clip:rect(50px 40px 90px 5px);
top:30px;
width:32px;
}
.window1 .shadow3,
.window3 .shadow3 {
clip: rect(0 77px 12px 16px);
top:96px;
}
.window2 .shadow1,
.window4 .shadow1 {
clip:rect(0px 10px 90px 5px);
left: -10px; top: 28px;
}
.window2 .shadow2,
.window4 .shadow2 {
clip:rect(70px 40px 90px 5px);
left:-6px;
top:-44px;
}
.window2 .shadow3,
.window4 .shadow3 {
clip:rect(0 73px 22px 0px);
left:9px;
top:6px;
}</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
