css3-简笔画腾讯QQlogo

来源：互联网发布：windows 体验指数7.3 编辑：程序博客网时间：2024/04/27 02:27

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简笔画QQ</title>

<style>

      .inner{
   width:500px;
   height: 700px;
   margin:20px auto;
   position: relative;
}
/*头部*/
.head{
   width:200px;
   height:170px;
   background-color: #000;
   z-index: 10;
   position: absolute;
   top:0;
   left:100px;
   border:1px solid #999;
   border-top-left-radius: 105px 105px;
    border-top-right-radius: 105px 105px;
    border-bottom-left-radius: 105px 62px;
    border-bottom-right-radius: 105px 62px;
}
/*眼睛*/
.eyes-lef{
   width:40px;
   height:60px;
   background-color: #fff;
   position: absolute;
   top:40px;
   left:50px;
   border:1px solid #999;
   border-radius: 50% 50%;
   -webkit-animation:flash 1s .2s ease both;
   -moz-animation:flash 1s .2s ease both;
}
.eyes-rig{
   width:40px;
   height:60px;
   background-color: #fff;
   position: absolute;
   top:40px;
   right:50px;
   border:1px solid #999;
   border-radius: 50% 50%;
   -webkit-animation:flash 1s .2s ease both;
   -moz-animation:flash 1s .2s ease both;
}
@-webkit-keyframes flash{
   0%,50%,100%{opacity: 1;} 25%,75%{opacity: 0;}
   }
@-moz-keyframes flash{
   0%,50%,100%{opacity: 1;} 25%,75%{opacity: 0;}
}
.eye-lef{
   width:20px;
   height:30px;
   background-color: #000;
   position: absolute;
   top:15px;
   right:4px;
   border:1px solid #999;
   border-radius: 50% 50%;
   -webkit-animation:bounce 1s .2s ease both;
   -moz-animation:bounce 1s .2s ease both;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
}
@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
    40%{-webkit-transform:translateY(-10px)}
    60%{-webkit-transform:translateY(-5px)}
}
@-moz-keyframes bounce{
    0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
    40%{-moz-transform:translateY(-10px)}
    60%{-moz-transform:translateY(-5px)}
}
.eye-rig{
   width: 20px;
    height: 23px;
    background-color: #000;
    position: absolute;
   top:15px;
   left:4px;
    border: 1px solid #999;
    border-top-left-radius: 10px 27px;
    border-top-right-radius: 10px 27px;
    border-bottom-left-radius: 0px 0px;
    border-bottom-right-radius: 0px 0px;
    -webkit-animation:bounce 1s .2s ease both;
    -moz-animation:bounce 1s .2s ease both;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
}
@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
    40%{-webkit-transform:translateY(-10px)}
    60%{-webkit-transform:translateY(-5px)}
}
@-moz-keyframes bounce{
    0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
    40%{-moz-transform:translateY(-10px)}
    60%{-moz-transform:translateY(-5px)}
}
/*嘴巴*/
.mouse-top{
   width: 145px;
    height: 34px;
    background: #FFA600;
    position: absolute;
   bottom: 29px;
    left: 29px;
    border: 1px solid #FFA600;
    border-bottom: none;
    border-top-left-radius: 45% 34px;
    border-top-right-radius: 45% 34px;
}
.mouse-bun{
   width: 124px;
    height: 24px;
    background: #FFA600;
    position: absolute;
   bottom:15px;
   left:40px;
    border: 1px solid #FFA600;
    border-top: none;
    border-bottom-left-radius: 45% 24px;
    border-bottom-right-radius: 45% 24px;
    margin-top: 20px;
}
/*围巾*/
.collar{
   width: 241px;
    height: 110px;
    z-index: 5;
    background-color: #FB0009;
    position: absolute;
    top: 100px;
    left: 78px;
    border:4px solid #000;
    border-top-left-radius: 30px 34px;
    border-top-right-radius: 38px 34px;
    border-bottom-left-radius: 50% 76px;
    border-bottom-right-radius: 50% 76px;
    border-top: none;
}
/*身体*/
.body{
   width: 270px;
   height: 170px;
   z-index: 3;
   position: absolute;
   top:160px;
   left:69px;
    overflow: hidden;
}
.body-out{
   width: 260px;
    height: 230px;
    background-color: #000;
    z-index: 3;
    position: absolute;
    bottom: 0px;
    left: 0px;
   border: 1px solid #000;
   border-top: none;
   border-radius:125px;
}
.body-int{
   width: 215px;
    height: 205px;
    background-color: #fff;
    z-index: 4;
    position: absolute;
    top: 18px;
    left:24px;
   border: 1px solid #000;
    border-radius: 50%;
}
.pocket{
   width: 50px;
   height:60px;
   z-index: 5;
   background: #FB0009;
   position: absolute;
    top: 74px;
    left:13px;
   border:3px solid #000;
   border-top-left-radius: 29px 54px;
    border-bottom-left-radius: 37px 47px;
    border-bottom-right-radius: 16px 13px;
}
/*手臂*/
.arms-lef{
   width: 45px;
    height: 111px;
    position: absolute;
    top: 153px;
    left: 38px;
    overflow: hidden;
    transform: rotate(28deg);
    -webkit-transform: rotate(28deg);
    -moz-transform:rotate(28deg);
    -o-transform:rotate(28deg);
    -ms-transform:rotate(28deg);
}
.arm-lef{
    width:40px;
    height: 110px;
    background-color: #000;
    position: absolute;
    bottom: 0px;
    left:0px;
    border:1px solid #000;
    border-top-left-radius: 74px 171px;
    border-top-right-radius: 38px 93px;
    border-bottom-left-radius: 103px 155px;
    border-bottom-right-radius: 34px 159px;
}
.arms-rig{
   width: 41px;
    height: 108px;
    position: absolute;
    top: 158px;
    left: 308px;
    overflow: hidden;
    transform: rotate(-21deg);
    -webkit-transform: rotate(-21deg);
    -moz-transform:rotate(-21deg);
    -o-transform:rotate(-21deg);
    -ms-transform:rotate(-21deg);
}
.arm-rig{
    width:40px;
    height: 110px;
    background-color: #000;
    position: absolute;
    bottom: 0px;
    right:0px;
    border:1px solid #000;
    border-top-left-radius: 17px 48px;
    border-top-right-radius: 15px 53px;
    border-bottom-left-radius: 20px 86px;
    border-bottom-right-radius: 31px 80px;
}
/*脚*/
.foot-lef{
    width: 111px;
    height: 69px;
    background: #FFA600;
    position: absolute;
    top: 279px;
    left: 76px;
    border:4px solid #000;
    border-top: none;
    border-top-left-radius: 70px 36px;
    border-bottom-left-radius: 63px 38px;
    border-bottom-right-radius: 50px 39px;
}
.foot-rig{
    width: 110px;
    height: 65px;
    background: #FFA600;
    position: absolute;
    top: 285px;
    left: 203px;
    border: 4px solid #000;
    border-top-right-radius: 60px 51px;
    border-bottom-left-radius: 68px 41px;
    border-bottom-right-radius: 69px 33px;
}

</style>

</head>
<body>
    <div class="inner">
    
       <div class="head">
            
           <div class="eyes-lef">
               <div class="eye-lef"></div>
           </div>
           <div class="eyes-rig">
               <div class="eye-rig"></div>
           </div>
           
           <div class="mouse-top"></div>
           <div class="mouse-bun"></div>
       </div>
       
       <div class="collar"></div>
       
       <div class="body">
           <div class="body-out">
                <div class="body-int">
                   <div class="pocket"></div>
                </div>
            </div>
       </div>
       
       <div class="arms-lef">
            <div class="arm-lef"></div>
       </div>
       <div class="arms-rig">
           <div class="arm-rig"></div>
       </div>
       
       <div class="foot-lef"></div>
       <div class="foot-rig"></div>
    </div>
</body>
</html>

0 0

css3-简笔画 腾讯QQlogo

css3-简笔画腾讯QQlogo