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

    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;

 }

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

用CSS3实现的addidas阿迪达斯标志LOGO的更多相关文章

  1. 举重若轻流水行云，前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197 喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过, ...

  2. 一些纯css3写的公司logo

      随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...

  3. HTML+CSS编写规范

    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...

  4. 人人网FED CSS编码前端开发规范

    文件相关规范 1.文件名必须由小写字母.数字.中划线-组成 2.文件必须用utf-8编码 3.文件引入可通过外联或内联方式引入: 3.1 外联方式:<link rel=”stylesheet” ...

  5. HTML编码规范 - (WEB前端命名规范)

    HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  6. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  7. Web 前端开发规范手册

    一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...

  8. 有利于SEO的DIV+CSS的命名规则

    搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤.为了更加符合SEO的规范,下面是目前流行的CSS+DIV的命名规则: 页头:header登录条:loginBar标志:logo ...

  9. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

随机推荐

  1. Objective-C Block数据类型 @protocol关键字

    Block数据类型 Block封装了一段代码 可以在任何时候执行 Block可以作为函数参数或者函数的返回值 而其本身又可以带输入参数或返回值 苹果官方建议尽量多用Block 在多线程 异步任务 集合 ...

  2. （C#）工厂方法模式

    1.工厂方法模式 第一了一个用于创建对象的接口,让子类自己决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. *工厂方法模式即克服了简单工厂模式违反开放-封闭原则的缺点,又保留了封装对象创建过 ...

  3. js屏蔽/过滤 特殊字符，输入就删除掉，实时删除

    1.替换方法: <input type="text" class="domain" onkeyup="this.value=this.value ...

  4. java基础-Comparator接口与Collections实现排序算法

    java 排序Comparable和Comparator使用 java提供了两个排序用的接口Comparable和Comparator,一般情况下使用区别如下: Comparable 接口用于类的固定 ...

  5. JavaScript 数组操作方法 和 ES5数组拓展

    JavaScript中数组有各种操作方法,以下通过举例来说明各种方法的使用: 数组操作方法 push 在数组最后添加一个元素 var arr=[3,4,5,6] console.log(arr) // ...

  6. 使用open live writee写的博客

    1. 安装包 下载链接:open live writer 2. 安装及使用教程 学习教程(转载他人) 3. 插入个图片 4. 写段代码 写不了,插件用不了 5. 插件使用: 参考文章:(http:// ...

  7. 为什么请求时,需要使用URLEncode做encode转码操作（转）

    什么要对url进行encode 发现现在几乎所有的网站都对url中的汉字和特殊的字符,进行了urlencode操作,也就是: http://hi.baidu.com/%BE%B2%D0%C4%C0%C ...

  8. POJ 2287 田忌赛马 贪心算法

    田忌赛马,大致题意是田忌和国王赛马,赢一局得200元,输一局输掉200元,平局则财产不动. 先输入一个整数N,接下来一行是田忌的N匹马,下一行是国王的N匹马.当N为0时结束. 此题为贪心算法解答,有两 ...

  9. 【web前端开发】浏览器兼容性处理大全

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  10. 第一次接触FPGA至今，总结的宝贵经验

    从大学时代第一次接触FPGA至今已有10多年的时间,至今记得当初第一次在EDA实验平台上完成数字秒表.抢答器.密码锁等实验时那个兴奋劲.当时由于没有接触到HDL硬件描述语言,设计都是在MAX+plus ...