用CSS3实现的addidas阿迪达斯标志LOGO特效代码

稿源：互联网 2018-09-10 03:40:12 点击： 7076 撤稿纠错

以下代码请在支持css3的火狐或谷歌等浏览器下查看特效演示，IE很多版本尚未支持CSS3.

以下讨论的是和CSS3 addidas 阿迪达斯 LOGO相关的用CSS3实现的addidas阿迪达斯标志LOGO特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018091091481.shtml方便下次再访问哦。

·上一篇： 纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo
·下一篇： 原生js写的贪食蛇网页版小游戏特效代码，一共设计了10关

用CSS3实现的addidas阿迪达斯标志LOGO特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻