<!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. Unity制作人物头像小图标和小地图

    人物头像的制作: 在场景中添加人物模型和环境模型 设置人物的layer为Player 在主摄像机的基础上,新建一个次摄像机并将摄像机镜头对准人物面部,调整至合适大小. 设置次摄像机 culling m ...

  2. Java开发工程师(Web方向) - 03.数据库开发 - 第3章.SQL注入与防范

    第3章--SQL注入与防范 SQL注入与防范 经常遇到的问题:数据安全问题,尤其是sql注入导致的数据库的安全漏洞 国内著名漏洞曝光平台:WooYun.org 数据库泄露的风险:用户信息.交易信息的泄 ...

  3. JS里点击事件判断是否 触发了节点 和给标签添加class属性

    $("#activityType").click(function(e){ if(e.target==$("#bb")[0]){ var bb=document ...

  4. kubernetes相关

    1.获取client , api-server 加token 或in-cluster方式 2.所有对象均有list update get 等方法 3.对象属性源码追踪,yaml与源码一一对应 4.一些 ...

  5. Paper Reading - Convolutional Image Captioning ( CVPR 2018 )

    Link of the Paper: https://arxiv.org/abs/1711.09151 Motivation: LSTM units are complex and inherentl ...

  6. JQuery文本框验证

    <" CODEPAGE="936"%><!--#include file="conncon.asp"--><!--#in ...

  7. PagedDataSource数据绑定控件和AspNetPager分页控件结合使用列表分页

    1.引用AspNetPager.dll. 2.放置Repeater数据绑定控件. <asp:Repeater ID="Repeater1" runat="serve ...

  8. YaoLingJump开发者日志（一）

      写完PokeCats之后意犹未尽,还想做一个更加有趣的游戏,比如说像超级玛丽那样.   游戏的主角就选"瑶玲"了,这是我小时候最喜欢的动画片<瑶玲啊瑶玲>的女主角. ...

  9. 【Linux】- mv命令

    Linux mv命令用来为文件或目录改名.或将文件或目录移入其它位置. 语法 mv [options] source dest mv [options] source... directory 参数说 ...

  10. netbeans调试配置

    apache端口8050,xdebug端口9000 1.把项目放到apache的htdocs下(一定要放在htdocs上,要么调试的时候xdebug会一直卡在“等待连接中”) 2.把php_xdebu ...