<!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. 关于javascript的一个小问题，请问有人看出啥问题吗？

    最近学习javascript,有一个问题挺奇怪的,先贴出代码: function binarySearch(){ var arr = [0,1,2,3]; var res = actbinarySea ...

  2. 【第一章】MySQL数据概述

    安装部署 备份恢复主备复制读写分离HA架构分布式数据库压力测试性能优化自动化运维 ＝＝数据的存储方式1. 人工管理阶段2. 文件系统阶段3. 数据库系统管理阶段 ＝＝数据库技术构成1. 数据库系统 D ...

  3. Intro to Probabilistic Model

    概率论复习 概率(Probability) 频率学派(Frequentist):由大量试验得到的期望频率(致命缺陷:有些事情无法大量试验,例如一封邮件是垃圾邮件的概率,雷达探测的物体是一枚导弹的概率) ...

  4. 论文笔记：Attentional Correlation Filter Network for Adaptive Visual Tracking

    Attentional Correlation Filter Network for Adaptive Visual Tracking CVPR2017 摘要:本文提出一种新的带有注意机制的跟踪框架, ...

  5. Rescue(BFS时间最短 另开数组或优先队列)

    Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is described as a N * M ...

  6. Thunder团队第二周 - Scrum会议4

    Scrum会议4 小组名称:Thunder 项目名称:爱阅app Scrum Master:邹双黛 工作照片: 宋雨同学在拍照,所以不再照片中. 参会成员: 王航:http://www.cnblogs ...

  7. JavaScript初探系列之面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  8. 《剑指offer》---输出链表倒数第k个结点

    本文算法使用python3实现 1 题目描述:   输入一个链表,输出该链表中倒数第k个结点.   时间限制:1s:空间限制:32768K 2 思路描述:   方法一:当链表长度为 $ n $ 时,输 ...

  9. PAT 甲级 1128 N Queens Puzzle

    https://pintia.cn/problem-sets/994805342720868352/problems/994805348915855360 The "eight queens ...

  10. 多个表单数据提交下的serialize()应用

    在实际开发场景中,难免遇到需要多个表单的数据传递问题. 之所以要进行多表单的数据传递是因为可以进行数据分组,便于数据的维护. 这个时候,出于不依赖jquery的考虑,有一个原生js函数来解决这个问题无 ...