html5 canvas 画阿迪达斯logo,用CSS3实现的addidas阿迪达斯标志LOGO特效代码

用CSS3实现的addidas阿迪达斯标志LOGO特效 demo by js.alixixi.com

#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;

width: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;

width: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;

width:200px;

}

#adidas .leaf3 .leaf-t1 {

left:4px;

}

#adidas .leaf3 .leaf-t2 {

left:-121px;

}

#adidas .stripes {

height: 50px;

left:-19px;

position: absolute;

top:160px;

width: 110px;

z-index:10;

}

#adidas .stripe {

background: #017ac3;

height: 12px;

left: -98px;

margin-bottom:12px;

position: relative;

top:0px;

width: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;

width: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;

width: 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;

width: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;

}

Tutorial by 网页特效 阿里西西