CSS做的Windows图标

®

纯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>