CSS3画哆啦A梦

哆啦A梦,又名机器猫、蓝胖子,是我们儿时的记忆,不可或缺。

最近,因为工作原因一直在研究纯CSS画图标。我想,我已长大,作为童年的陪伴—哆啦A梦,我觉得、并且有必要利用自己现有的技术把他刻画下来。

请看CSS3如何刻画出你心中的哆啦A梦!

首先,敬上效果图:

效果展示:点我

HTML代码:

<div class="wrapper">
    <div class="doraemon">
        <div class="head">
            <div class="eyes">
                <div class="eye left">
                    <div class="black bleft"></div>
                </div>
                <div class="eye right">
                    <div class="black bright"></div>
                </div>
            </div>
            <div class="face">
                <div class="white"></div>
                <div class="nose">
                    <div class="light"></div>
                </div>
                <div class="nose_line"></div>
                <div class="mouth"></div>
                <div class="whiskers">
                    <div class="whisker rTop r160"></div>
                    <div class="whisker rMiddle"></div>
                    <div class="whisker rBottom r20"></div>
                    <div class="whisker lTop r20"></div>
                    <div class="whisker lMiddle"></div>
                    <div class="whisker lBottom r160"></div>
                </div>
            </div>
        </div>
        <div class="choker">
            <div class="bell">
                <div class="bell_line"></div>
                <div class="bell_circle"></div>
                <div class="bell_under"></div>
                <div class="bell_light"></div>
            </div>
        </div>
        <div class="bodys">
            <div class="body"></div>
            <div class="wraps"></div>
            <div class="pocket"></div>
            <div class="pocket_mask"></div>
        </div>
        <div class="hand_right">
            <div class="arm"></div>
            <div class="circle"></div>
            <div class="arm_rewrite"></div>
        </div>
        <div class="hand_left">
            <div class="arm"></div>
            <div class="circle"></div>
            <div class="arm_rewrite"></div>
        </div>
        <div class="foot">
            <div class="foot_rewrite"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</div>

CSS代码:

.wrapper{
    width: 324px;
    margin: 20px auto 0;
}
.doraemon{
    position: relative;
}
.doraemon .head{
    position:relative;
    width: 320px;
    height: 300px;
    border-radius: 150px;
    background: #07bbee;
    background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
    background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
    background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
    border:2px solid #555;
    box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
}
.doraemon .face{
    position: relative;
    z-index: 2;
}
.doraemon .face .white{
    width: 265px;
    height: 195px;
    border-radius: 150px;
    position: absolute;
    top: 75px;
    left: 25px;
    background: #fff;
    background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
    background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
    background: -ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
}
.doraemon .face .nose{
    width:30px;
    height:30px;
    border-radius:15px;
    background:#c93300;
    border:2px solid #000;
    position:absolute;
    top:110px;
    left:140px;
    z-index:3;
}
.doraemon .face .nose .light{
    width:10px;
    height:10px;
    border-radius: 5px;
    box-shadow: 19px 8px 5px #fff;
}
.doraemon .face .nose_line{
    width:3px;
    height:100px;
    background:#333;
    position:absolute;
    top:143px;
    left:155px;
    z-index:3;
}
.doraemon .face .mouth{
    width:220px;
    height:400px;
    border-bottom:3px solid #333;
    border-radius:120px;
    position:absolute;
    top:-160px;
    left:45px;
}
.doraemon .eyes{
    position: relative;
    z-index: 3;
}
.doraemon .eyes .eye{
    width:72px;
    height:82px;
    background:#fff;
    border:2px solid #000;
    border-radius:35px 35px;
    position:absolute;
    top:40px;
}
.doraemon .eyes .eye .black{
    width:14px;
    height:14px;
    background:#000;
    border-radius:7px;
    position:absolute;
    top:40px;
}
.doraemon .eyes .left{
    left:82px;
}
.doraemon .eyes .right{
    left: 156px;
}
.doraemon .eyes .eye .bleft{
    left: 50px;
} .doraemon .eyes .eye .bright{
    left: 7px;
}
.doraemon .whiskers{
    width:220px;
    height:80px;
    background:#fff;
    border-radius:15px;
    position:absolute;
    top:120px;
    left:45px;
    z-index:2;
}
.doraemon .whiskers .whisker{
    width: 60px;
    height: 2px;
    background: #333;
    position: absolute;
    z-index: 2;
}
.doraemon .whiskers .rTop{
    left: 165px;
    top: 25px;
}
.doraemon .whiskers .rMiddle{
    left: 167px;
    top: 45px;
}
.doraemon .whiskers .rBottom{
    left: 165px;
    top: 65px;
}
.doraemon .whiskers .lTop{
    left: 0;
    top: 25px;
}
.doraemon .whiskers .lMiddle{
    left: -2px;
    top: 45px;
}
.doraemon .whiskers .lBottom{
    left: 0;
    top: 65px;
}
.doraemon .whiskers .r160{
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    -o-transform: rotate(160deg);
    transform: rotate(160deg);
}
.doraemon .whiskers .r20{
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    -o-transform: rotate(200deg);
    transform: rotate(200deg);
}
.doraemon .choker{
    width: 230px;
    height: 20px;
    background: #c40;
    background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
    background: -moz-linear-gradient(center top,#c40,#800400);
    background: -ms-linear-gradient(center top,#c40,#800400);
    border: 2px solid #000;
    border-radius: 10px;
    position: relative;
    top: -40px;
    left: 45px;
    z-index: 4;
}
.doraemon .choker .bell{
    width: 40px;
    height: 40px;
    _overflow: hidden;
    border: 2px solid #000;
    border-radius: 50px;
    background: #f9f12a;
    background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
    background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
    background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
    position: absolute;
    top: 5px;
    left: 90px;
}
.doraemon .choker .bell_line{
    width: 36px;
    height: 2px;
    background: #f9f12a;
    border: 2px solid #333;
    border-radius: 3px 3px 0 0;
    position: absolute;
    top: 10px;
}
.doraemon .choker .bell_circle{
    width:12px;
    height:10px;
    background:#000;
    border-radius:5px;
    position:absolute;
    top:20px;
    left:14px;
}
.doraemon .choker .bell_under{
    width: 3px;
    height:15px;
    background:#000;
    position:absolute;
    left: 18px;
    top:27px;
}
.doraemon .choker .bell_light{
    width:12px;
    height:12px;
    border-radius:10px;
    box-shadow:19px 8px 5px #fff;
    position:absolute;
    top:-5px;
    left:5px;
    opacity:0.7;
}
.doraemon .bodys{
    position: relative;
    top: -310px;
}
.doraemon .bodys .body{
    width: 220px;
    height: 165px;
    background: #07beea;
    background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
    background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
    background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
    border:2px solid #333;
    border-bottom: none;
    position:absolute;
    top:265px;
    left:50px;
}
.doraemon .bodys .wraps{
    width: 170px;
    height: 170px;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
    background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
    background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
    border: 2px solid #000;
    border-radius: 85px;
    position: absolute;
    left: 72px;
    top: 230px;
}
.doraemon .bodys .pocket{
    width: 130px;
    height: 130px;
    border-radius: 65px;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
    background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
    background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
    border: 2px solid #000;
    position:absolute;
    top: 250px;
    left: 92px;
}
.doraemon .bodys .pocket_mask{
    width: 134px;
    height: 60px;
    background:#fff;
    border-bottom: 2px solid #000;
    position:absolute;
    top: 259px;
    left: 92px;
}
.doraemon .hand_right, .doraemon .hand_left{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 272px;
    left: 248px;
}
.doraemon .hand_left{
    left: -10px;
}
.doraemon .arm{
    width:80px;
    height:50px;
    background: #07beea;
    background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
    background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
    background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
    border: 1px solid #000000;
    box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
    z-index: -1;
    position: relative;
}
.doraemon .hand_right .arm{
    top: 17px;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.doraemon .hand_left .arm{
    top: 17px;
    background: #0096be;
    box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
    -webkit-transform: rotate(145deg);
    -moz-transform: rotate(145deg);
    -ms-transform: rotate(145deg);
    -o-transform: rotate(145deg);
    transform: rotate(145deg);
}
.doraemon .circle{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: 2px solid #000;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
    background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
    background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
    position: absolute;
}
.doraemon .hand_right .circle{
    left: 40px;
    top: 32px;
}
.doraemon .hand_left .circle{
    left: -20px;
    top: 32px;
}
.doraemon .arm_rewrite{
    height: 45px;
    width: 5px;
    background: #07beea;
    position: relative;
}
.doraemon .hand_right .arm_rewrite{
    top: -45px;
    left: 22px;
}
.doraemon .hand_left .arm_rewrite{
    top: -45px;
    left: 60px;
    background: #0096be;
}
.doraemon .foot{
    width: 280px;
    height: 40px;
    position: relative;
    top: 44px;
    left: 22px;
}
.doraemon .foot .left, .doraemon .foot .right{
    width: 125px;
    height: 30px;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
    background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
    background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
    border: 2px solid #333;
    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
    position: relative;
}
.doraemon .foot .left{
    left: 10px;
    top: 65px;
    border-radius: 80px 60px 60px 40px;
}
.doraemon .foot .right{
    top: 32px;
    left: 141px;
    border-radius: 60px 80px 40px 60px;
}
.doraemon .foot .foot_rewrite{
    width: 30px;
    height: 10px;
    background: #fff;
    border: 2px solid #000;
    border-bottom: none;
    border-radius: 40px 40px 0 0;
    position: relative;
    bottom: -67px;
    left: 124px;
    _left: 127px;
}
.doraemon .eyes .eye .black{
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 7px;
    position: absolute;
    top: 40px;
    -webkit-animation: eyeMove 3s linear infinite;
    -moz-animation: eyeMove 3s linear infinite;
    -ms-animation: eyeMove 3s linear infinite;
    -o-animation: eyeMove 3s linear infinite;
    animation: eyeMove 3s linear infinite;
}
@-webkit-keyframes eyeMove{
    70%{margin: 0 0 0 0;}
    80%{margin: -22px 0 0 0;}
    85%{margin: -22px 0 0 5px;}
    90%{margin: -22px 10px 0 0;}
    93%{margin: -22px 0 0 0;}
    96%{margin: 0 0 0 0;}
}
@-moz-keyframes eyeMove{
    70%{margin: 0 0 0 0;}
    80%{margin: -22px 0 0 0;}
    85%{margin: -22px 0 0 5px;}
    90%{margin: -22px 10px 0 0;}
    93%{margin: -22px 0 0 0;}
    96%{margin: 0 0 0 0;}
}
@-ms-keyframes eyeMove{
    70%{margin: 0 0 0 0;}
    80%{margin: -22px 0 0 0;}
    85%{margin: -22px 0 0 5px;}
    90%{margin: -22px 10px 0 0;}
    93%{margin: -22px 0 0 0;}
    96%{margin: 0 0 0 0;}
}
@-o-keyframes eyeMove{
    70%{margin: 0 0 0 0;}
    80%{margin: -22px 0 0 0;}
    85%{margin: -22px 0 0 5px;}
    90%{margin: -22px 10px 0 0;}
    93%{margin: -22px 0 0 0;}
    96%{margin: 0 0 0 0;}
}
@keyframes eyeMove{
    70%{margin: 0 0 0 0;}
    80%{margin: -22px 0 0 0;}
    85%{margin: -22px 0 0 5px;}
    90%{margin: -22px 10px 0 0;}
    93%{margin: -22px 0 0 0;}
    96%{margin: 0 0 0 0;}
}

备注:本实例多处运用CSS3新属性,IE9及以下不可兼容,其他各主流浏览器均可兼容!

发表评论

电子邮件地址不会被公开。 必填项已用*标注