<!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. Qt Creator 下启动vim模式后，运行快捷键Ctrl+R失效解决方案

    首先开启vim后,Ctrl+R无法用 解决: 工具 -> 选项->FakeVim 转到Ex Command Mapping 搜索Run 底栏Regular expression 输入run ...

  2. Linux中常用Shell命令

    本随笔文章,由个人博客(鸟不拉屎)转移至博客园 写于:2018 年 05 月 04 日 原地址:https://niaobulashi.com/archives/linux-shell.html -- ...

  3. 用Python实现一个端口扫描，只需简单几步就好

    一.常见端口扫描的原理 0.秘密扫描 秘密扫描是一种不被审计工具所检测的扫描技术. 它通常用于在通过普通的防火墙或路由器的筛选(filtering)时隐藏自己. 秘密扫描能躲避IDS.防火墙.包过滤器 ...

  4. VMware实现控制台功能（VMware Remote Console）

    说明: 刚开始一脸懵逼,google了一些资料,发现基本没有能快速落地的,自己做完后梳理了一下发上来供大家参考. 如果帮到你了,请点赞评论关注,以资鼓励,多谢~ 实现VMware控制台功能主要有两种方 ...

  5. 逆波兰表达式[栈 C 语言 实现]

    逆波兰表达式 逆波兰表达式又叫做后缀表达式.在通常的表达式中,二元运算符总是置于与之相关的两个运算对象之间,这种表示法也称为中缀表示.波兰逻辑学家J.Lukasiewicz于1929年提出了另一种表示 ...

  6. 子序列 （All in All,UVa10340)

    题目描述:算法竞赛入门经典习题3-9 题目思路:循环匹配 //没有按照原题的输入输出 #include <stdio.h> #include <string.h> #defin ...

  7. BFC与合并 浅析

    BFC BFC 全称 Block Formatting Context.每个渲染区域用formatting context表示,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用在正常流中的盒 ...

  8. 技本功丨知否知否，Redux源码竟如此意味深长（下集）

    上集回顾 Redux是如何使用的?首先再来回顾一下这个使用demo(谁让这段代码完整地展示了redux的使用) 如果有小伙伴对这段代码不是很理解的话,建议先去学习Redux的使用再来看这篇源码,这样更 ...

  9. 剑指offer-二叉树搜索树与双向链表25

    题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. class Solution: def Convert(self, pRo ...

  10. Python变量常量及注释

    一.变量命名规则1.有字母.数字.下划线搭配组合而成2.不能以数字开头,更不能全为数字3.不能用Python的关键字4.不要太长5.名字要有意义6.不要用中文7.区分大小写8.采用驼峰体命名(多个单词 ...