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 网页特效阿里西西

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

用CSS3实现的addidas阿迪达斯标志LOGO
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>用CSS3实现的ad ...
html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
html白云飘动效果特效代码,css3实现简单的白云飘动背景特效代码示例
本篇文章小编给大家分享一下css3实现简单的白云飘动背景特效代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 这是一款非常简单的纯CSS3白云飘 ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
html画布直线代码,图文详解如何用html5 canvas画一条直线
是HTML5 中新增的元素,它可以结合JavaScript脚本绘制出各种各样的图形,对于canvas你了解多少?你会用canvas画直线吗?这篇文章就和大家讲讲如何用canvas画一条直线,有一定的参 ...
毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...

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

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

最新文章

热门文章