• css写出来的QQ企鹅


    <!DOCTYPE HTML>
    <html>
    <!--
    Made In 花小柒
    -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>QQ企鹅妹妹</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    div {
    position: absolute;
    }

    .qq_body {
    470px;
    height: 540px;
    left: 100px;
    top: 100px;
    }
    /*QQ头部*/

    .head {
    z-index: 0;
    left: 65px;
    top: 0;
    345px;
    height: 367px;
    background: #19161A;
    border-radius: 50%;
    }
    /*QQ眼睛*/

    .lefteye,.righteye {
    66px;
    height: 99px;
    border-radius: 50%;
    background: #fff;
    left: 153px;
    top: 76px;
    z-index: 7;
    overflow: hidden;
    }

    .eyeball {
    30px;
    height: 42px;
    background: #201E1F;
    border-radius: 50%;
    left: 28px;
    top: 34px;
    }

    .eyeball .eyewhite {
    11px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    left: 12px;
    top: 12px;
    }

    .righteye {
    left: 245px;
    }

    .righteye .eyeball {
    left: 11px;
    }



    .eyeshadowwhite {
    65px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    top: 20px;
    }


    /*QQ嘴巴*/

    .mouth_box {
    344px;
    height: 188px;
    top: 102px;
    left: 66px;
    border-radius: 50%;
    z-index: 6;
    background: #19161A;
    }

    .mouth {
    234px;
    height: 70px;
    border-radius: 50%;
    background: #FC9202;
    left: 52px;
    bottom: 35px;
    }

    .mouth .mark {
    160px;
    height: 84px;
    border: 8px solid #201E1F;
    border-left: 1px solid #201E1F;
    border-right: 1px solid #201E1F;
    border-radius: 50%;
    clip: rect(65px 160px 100px 0);
    left: 32px;
    top: -25px;
    }

    /*QQ身体*/

    .belly {
    385px;
    height: 322px;
    left: 45px;
    top: 185px;
    z-index: 1;
    background: #19161A;
    border-radius: 50%;
    }

    .belly_white {
    315px;
    height: 250px;
    background: #fff;
    border-radius: 50%;
    left: 34px;
    bottom: 10px;
    }
    /*QQ围巾*/

    .scarf {
    355px;
    height: 198px;
    background: red;
    border-radius: 50%;
    z-index: 5;
    left: 60px;
    top: 155px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
    }

    .scarf_d {
    80px;
    height: 110px;
    border-radius: 15px 15px 18px 35px;
    background:red;
    left: 110px;
    top: 325px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    z-index: 4;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
    }
    /*QQ翅膀*/

    .leftwing,.rightwing {
    50px;
    height: 170px;
    background: #1A1624;
    border-radius: 50%;
    top: 270px;
    }

    .leftwing {
    left: 10px;
    transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    }

    .rightwing {
    right: 10px;
    transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    }
    /*QQ脚掌*/

    .leftsole,.rightsole {
    157px;
    height: 82px;
    background: #F07203;
    top: 455px;
    border-radius: 50%;
    border: 3px solid #872E0C;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
    }

    .leftsole {
    left: 55px;
    transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    }

    .rightsole {
    right: 55px;
    transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    }

    .leftsole .toe,.rightsole .toe {
    60px;
    height: 22px;
    background: #F07203;
    border-radius: 50%;
    border-top: 1px solid #872E0C;
    }

    .leftsole .toe {
    transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    border-left: 3px solid #872E0C;
    }

    .rightsole .toe {
    right: 0;
    transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    border-right: 3px solid #872E0C;
    }
    </style>
    </head>

    <body>
    <div class="qq_body">
    <div class="head"></div>
    <div class="bowknot">
    <div class="bowknot_l">
    <div class="bowknot_line3"></div>
    <div class="bowknot_line4"></div>
    </div>
    <div class="bowknot_c"></div>

    <div class="bowknot_tip_l"></div>
    <div class="bowknot_tip_r"></div>
    </div>

    <div class="lefteye">
    <div class="eyeshadowwhite"></div>
    <div class="eyeball">
    <div class="eyewhite"></div>
    </div>
    </div>
    <div class="righteye">
    <div class="eyeshadow"></div>
    <div class="eyeshadowwhite"></div>
    <div class="eyeball">
    <div class="eyewhite"></div>
    </div>
    </div>
    <div class="mouth_box">
    <div class="mouth">
    <div class="mark"></div>
    </div>
    </div>
    <div class="belly">
    <div class="belly_white"></div>
    </div>
    <div class="scarf"></div>
    <div class="scarf_d"></div>
    <div class="leftwing"></div>
    <div class="rightwing"></div>
    <div class="leftsole">
    <div class="toe"></div>
    </div>
    <div class="rightsole">
    <div class="toe"></div>
    </div>
    </div>
    </body>

    </html>

  • 相关阅读:
    http协议概述
    博客写起来一周年了~
    angular与vue的应用对比
    一些前端的小问题
    详解vue的数据binding原理
    闲的没事水一贴!
    关于angular1与angular2的应用区别
    angularjs优化方略
    rxjs学习笔记
    HTML5移动开发学习笔记
  • 原文地址:https://www.cnblogs.com/ll-taj/p/6007634.html
Copyright © 2020-2023  润新知