<!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. lesson 22 by heart

    lesson 22 by heart on end = continuously 连续不断地 know/learn sth by heart 记忆sth falter: speak hesitantl ...

  2. Spring ApplicationContext 简介

    ApplicationContext是对BeanFactory的扩展,实现BeanFactory的所有功能,并添加了事件传播,国际化,资源文件处理等.   configure locations:(C ...

  3. PHP计算两个已知经纬度之间的距离

    /** *求两个已知经纬度之间的距离,单位为千米 *@param lng1,lng2 经度 *@param lat1,lat2 纬度 *@return float 距离,单位千米 **/ privat ...

  4. 莱布尼兹三角形(C++)

    [问题描述] 如下图所示的三角形,请编程输出图中排在第 n 行从左边数第 m 个位置上的数. [代码展示] # include<iostream># include<cstdio&g ...

  5. 微软的XML可视化编辑器：XML Notepad 2007

    最近项目需要定义xml协议格式,编写xml文件比较多,之前使用xml spy工具,但是不够轻量级. 微软提供的xml nodepad 2007很实用,希望能给大家提供帮助. 运行后的界面 下载地址:h ...

  6. scatter注记词2

    couch ranch bind ski extra bring note embrace tape they stick legend

  7. [leetcode-663-Equal Tree Partition]

    Given a binary tree with n nodes, your task is to check if it's possible to partition the tree to tw ...

  8. 【转载】java byte转十六进制

    public static String bytes2HexString(byte[] b) { String ret = ""; for (int i = 0; i < b ...

  9. POJ 1873 The Fortified Forest（枚举+凸包）

    Description Once upon a time, in a faraway land, there lived a king. This king owned a small collect ...

  10. 最小生成树——prim

    prim:逐“点”生成最小生成树 与Dijkstra不同的是:加入点到生成树中,不要考虑与源点的距离,而是考虑与生成树的距离 #include <iostream> #include &l ...