<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>用CSS3实现的addidas阿迪达斯标志LOGO特效 demo by js.alixixi.com</title> <style> #adidas .canvas { background: #017ac3; } #adidas .icon { left: 230px; position: absolute; top: 10px; } #adidas .leaf-t1, #adidas .leaf-t2 { background: #fff; border-radius:204px/280px; clip:rect(18px 43px 255px 0px); height: 280px; position: absolute; top:-36px; 194px; } #adidas .leaf-t2 { left:-109px; position: absolute; -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); } #adidas .leaf1 .leaf-t1, #adidas .leaf1 .leaf-t2 { height:250px; } #adidas .leaf2 .leaf-t1, #adidas .leaf2 .leaf-t2, #adidas .leaf3 .leaf-t1, #adidas .leaf3 .leaf-t2 { clip:rect(20px 38px 220px 0px ); height:240px; } #adidas .leaf1 { position: absolute; top:50px; } #adidas .leaf2 { left:-130px; position: absolute; top: 131px; -o-transform:rotate(-40deg); -moz-transform:rotate(-40deg); -ms-transform:rotate(-40deg); -webkit-transform:rotate(-40deg); transform:rotate(-40deg); } #adidas .leaf2 .leaf-t1, #adidas .leaf2 .leaf-t2 { border-radius:200px/287px; 200px; } #adidas .leaf2 .leaf-t1 { left:5px; } #adidas .leaf2 .leaf-t2 { left:-120px; } #adidas .leaf3 { left:151px; position: absolute; top:77px; -o-transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); -webkit-transform:rotate(40deg); transform:rotate(40deg); } #adidas .leaf3 .leaf-t1, #adidas .leaf3 .leaf-t2 { border-radius:200px/287px; 200px; } #adidas .leaf3 .leaf-t1 { left:4px; } #adidas .leaf3 .leaf-t2 { left:-121px; } #adidas .stripes { height: 50px; left:-19px; position: absolute; top:160px; 110px; z-index:10; } #adidas .stripe { background: #017ac3; height: 12px; left: -98px; margin-bottom:12px; position: relative; top:0px; 320px; } #adidas .header h2 { text-indent: -57px; } /* general styles */ .canvas { display: block; overflow: hidden; position: relative; top: 0px; text-indent:-9999px; z-index: 10; } .icon, .icon * { display: block; position: absolute; } .monitor, .monitor .canvas { height: 304px; 540px; } .monitor { background: #000; border:30px solid #000; border-radius:20px; float:left; position:relative; } .monitor:before { /* shadow */ box-shadow: 0 360px 10px rgba(0,0,0,0.2); border-radius:50%; content: "#"; display: block; height: 20px; left: 30px; position: absolute; text-indent: -9999px; 540px; } .monitor:after { /* shine */ background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); border-radius:20px 20px 0 0; height: 364px; content: "#"; display: block; position: absolute; right: -30px; text-indent: -9999px; top:-30px; 600px; z-index: 10; } footer { font:14px/1.3 'Microsoft YaHei'; margin-top:150px; color: #000; font-size: 15px; line-height: 1.6; padding: 60px 20px 0; text-align: center; display: block; } footer a{ color:#000; text-decoration:none; } footer a:hover{ text-decoration:underline; } </style> </head> <body> <div id="adidas"> <div class="monitor"> <div class="canvas"> <div class="icon"> <div class="leaf1"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="leaf2"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="leaf3"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="stripes"> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> </div> </div> </div> </div> </div> <footer>Tutorial by <a href="http://js.alixixi.com" target="_blank">网页特效 阿里西西</a></footer> </body> </html>