zoukankan html css js c++ java

用CSS3实现的addidas阿迪达斯标志LOGO

<!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;
    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;
    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;
    200px;
}
#adidas .leaf3 .leaf-t1 { 
    left:4px;
}
#adidas .leaf3 .leaf-t2 {
    left:-121px;
}
#adidas .stripes {
    height: 50px;
    left:-19px;
    position: absolute;
    top:160px;
     110px;
    z-index:10;
}
#adidas .stripe {
    background: #017ac3;
    height: 12px;
    left: -98px;
    margin-bottom:12px;
    position: relative;
    top:0px;
    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;
    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;
     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;
    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>

查看全文

相关阅读:
多线程学习笔记第一篇
 当Visual Studio中win32控制台应用程序的注释也会生产代码时……
博客行文及排版技法
 Debian Linux下的Python学习——安装python,vim
onhashchange事件
 MyEclipse9 Maven开发Web工程详细配置
 Java面向对象(上)
lucene 的分析器(analyzer)与分词器(tokenizer)和过滤器(tokenfilter)
java编程陷阱
 solr中文分词(mmseg4j)

原文地址：https://www.cnblogs.com/suway/p/7231044.html