用CSS3画机器猫

Posted on 2015-08-22 20:13 BrianWong 阅读(342) 评论(0) 收藏举报
CSS3一出来的时候就已经有人用它来画出一个机器猫，到今年CSS大会再次提及，按耐不住，想自己尝试一下画一画，怎么画就不介绍了，直接帖代码，大家交流交流。
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box {
            position: relative;
            margin-left: 200px;
        }
        .head-outline {
            width: 190px;
            height: 180px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 47% / 50%;
            margin-left: 6px;
            background: #42CCED;
        }
        .face {
            position: relative;
            width: 160px;
            height: 140px;
            margin: 40px auto;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 50%;  
            font-size: 0;
            background: #fff;          
        }
        .eyes {
            display: inline-block;
            position: relative;
            width: 45px;
            height: 53px;
            margin-top: -20px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 45% / 40%;  
            background: #fff;          
        }
        .eyes:nth-child(1) {
            margin-left: 30px;
        }
        #left-eye:before {
            position: absolute;
            content: "";
            width: 10px; 
            height: 10px;
            left: 28px;
            top: 35px;
            border-radius: 50%;
            background: black;
        }
        #right-eye:before {
            position: absolute;
            content: "";
            width: 10px;
            height: 10px;
            right: 28px;
            top: 35px;
            border-radius: 50%;
            background: black;
        }
        .nose {
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #CA3D00;
            margin: -10px auto;
            border: solid 1px black;
        }
        .nose:before {
            position: absolute;
            content: "";
            top: 7px;
            left: 13px;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 2px 2px #fff;
        }
        .mouth {
            position: absolute;
            top: -18px;
            left: 8px;
            width: 140px;
            height: 120px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 50%;
            clip: rect(90px 125px 124px 20px);
        }
        .line {
            content: "";
            width: 2px;
            height: 67px;
            margin: auto;
            background: #393939;
        }
        .left-hair {
            position: relative;
            width: 50px;
            height: 2px;
            margin: -50px auto auto 10px;
            background: #393939;
            transform: scale(0.8)
        }
        .left-hair:before {
            position: absolute;
            content: "";
            top: 35px;
            left: -10px;
            width: 50px;
            height: 2px;
            margin: -50px auto auto 10px;
            background: #393939;
            transform: rotate(19deg);
        }
        .left-hair:after {
            position: absolute;
            top: 65px;
            left: -10px;
            content: "";
            width: 50px;
            height: 2px;
            margin: -50px auto auto 10px;
            background: #393939;
            transform: rotate(-19deg);
        }      
        .right-hair {
            position: relative;
            width: 50px;
            height: 2px;
            margin: 0 auto auto 100px;
            background: #393939;
            transform: rotateZ(180deg) scale(0.8);
        }
        .right-hair:before {
            position: absolute;
            content: "";
            top: 35px;
            left: -10px;
            width: 50px;
            height: 2px;
            margin: -50px auto auto 10px;
            background: #393939;
            transform: rotate(19deg);
        }
        .right-hair:after {
            position: absolute;
            top: 65px;
            left: -10px;
            content: "";
            width: 50px;
            height: 2px;
            margin: -50px auto auto 10px;
            background: #393939;
            transform: rotate(-19deg);
        }    
        .neck {
            width: 140px;
            border: solid 1px black;
            height: 13px;
            background: #A11E00;
            margin: -60px auto;
            border-radius: 30px / 50px;
            transform: translateZ(10px);
        }
        .d-body {
            width: 136px;
            height: 105px;
            background: #42CCED;
            margin-left: 33px;
            margin-top: 2px;
            border: solid 2px rgb(87, 84, 84);
            border-bottom: none;
            border-top: none;
            overflow: hidden;
            transform: translateY(-5px);
        }
        .d-body:before {
            position: absolute;
            top: 95px;
            left: 59px;
            content: "";
            width: 14px;
            height: 26px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 80% / 60%;
            background: #fff;
        }
        .belly {           
            width: 110px;
            position: absolute;
            height: 116px;
            background: #fff;
            margin-left: 11px;
            margin-top: -34px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 50%;
            
        }
        .pocket {
            width: 84px;
            height: 42px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 0 0 90px 90px;
            margin: 60px auto;
        }
        .bell {
            width: 22px;
            position: absolute;
            height: 22px;
            border: solid 2px rgb(87, 84, 84);
            top: 172px;
            left: 88px;
            border-radius: 50%;
            background: #D5CE0F;
            overflow: hidden;
        }
        .left-hand {
            position: absolute;
            width: 34px;
            top: 192px;
            left: 1px;
            height: 40px;
            border: solid 1px black;
            border-right: none;
            background: #42CCED;
            transform: skewY(-35deg);
        }
        .left-hand:before {
            position: absolute;
            top: -1px;
            left: -22px;
            content: "";
            width: 40px;
            height: 40px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 48%;
            background: #fff;
            transform: skewY(35deg);
        }
        .right-hand {
            position: absolute;
            width: 34px;
            top: 193px;
            left: 170px;
            height: 40px;
            border: solid 1px black;
            border-left: none;
            background: #42CCED;
            transform: skewY(35deg);
        }
        .right-hand:before {
            position: absolute;
            top: -4px;
            left: 17px;
            content: "";
            width: 40px;
            height: 40px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 48%;
            background: #fff;
            transform: skewY(-35deg);
        }
        .left-foot {
            width: 73px;
            height: 17px;
            margin-left: 24px;
            margin-top: -5px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 30% 16% 16% 20% / 150% 95% 95% 50%

        }
        .right-foot {
            width: 73px;
            height: 17px;
            margin-left: 105px;
            margin-top: -21px;
            border: solid 2px rgb(87, 84, 84);
            border-radius: 30% 16% 16% 20% / 150% 95% 95% 50%;
            transform: rotateY(180deg)
        }
        .bell-line {
            width: 32px;
            height: 2px;
            margin-top: 5px;
            margin-left: -2px;
            background: rgb(178, 172, 19);
            border: solid 1px rgb(87, 84, 84);
        }
        .bell-line:before {
            content: "";
            position: absolute;
            width: 6px;
            height: 6px;
            background: black;
            border-radius: 50%;
            margin-left: 9px;
            margin-top: 5px;
        }
        .bell-line:after {
            content: "";
            position: absolute;
            width: 2px;
            height: 20px;
            background: black;
            margin-left: 11px;
            margin-top: 5px;           
        }
    </style>
</head>
<body>
    <div class = "box">
        <div class = "head-outline">
            <div class = "face">
                <li class = "eyes" id = "left-eye"></li>
                <li class = "eyes" id = "right-eye"></li>
                <li class = "nose"></li>
                <li class = "mouth"></li>
                <li class = "line"></li>
                <li class = "left-hair"></li>
                <li class = "right-hair"></li>
            </div>
            <div class = "neck"></div>
        </div>   
        <div class = "d-body">
            <div class = "belly">
                <div class = "pocket"></div>
            </div>
        </div>
        <div class = "bell">
            <div class = "bell-line"></div>
        </div>
        <div class = "left-hand"></div>
        <div class = "right-hand"></div>
        <div class = "left-foot"></div>
        <div class = "right-foot"></div>
    </div>
</body>
</html>
我画得比较粗糙，一些渐变，阴影都没有去细调。效果如下（只在谷歌浏览器下测试通过，其他浏览器打开会有样式问题）：
刷新页面返回顶部