用css3画一个哆啦A梦

今天偶然看到朋友用纯css3画了一个素描杯,很受启发,css3这么好玩的代码再不玩就要荒废了,于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位,其次是通过边框属性来切割棱角分明的盒子,让线条看起来流畅,还有就是通过z-index属性来控制图层,@keyframes可以让你的图片动起来,更加生动,接下来就一起复习一下这几个属性吧,然后就可以自己动手作画了。

1. position属性:规定元素的定位类型

(1)说明:

 - 默认值:static
 - 继承性:no
 - 版本:css2
 - javascript语法:object.style.position="absolute"

(2)可能的值:

 - static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
 - absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
 - fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
 - relative:生成相对定位的元素,相对于其正常位置进行定位。
 - inherit:规定应该从父元素继承 position 属性的值。

2.border属性

(1)border-style

属性值 功能描述                                    
none    无边框
hidden  与“none”相同,应用于表格时用于解决边框冲突问题
dotted  点状边框
dashed  虚线边框
solid   实线边框
double  双线
groove  3D凹槽边框,其效果取决于border-color的值
ridge   3D垄状边框
inset   3D inset边框
outset  3D outset边框
inherit 规定应该从父元素继承边框样式,部分浏览器不支持这个属性

(2)border-color
(3)border-radius

border-top-left-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-top-right-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-bottom-left-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-bottom-left-radius:<水平圆角半径值>/<垂直圆角半径值>;

(4)box-shadow

 - none:默认值。元素没有任何阴影效果。
 - inset:阴影类型,可选值。默认为外阴影,取值'inset'设置内阴影。
 - x-offset:阴影水平偏移量。取正值,阴影在元素右边;取负值,反之。
 - y-offset:阴影垂直偏移量。取正值,阴影在元素底部;取负值,反之。
 - blur-radius:阴影模糊半径,可选参数。0:不具有模糊效果,值越大越模糊。
 - spread-radius:阴影扩展半径,可选参数。取正值,整个阴影都延展扩大;取负值,反之。
 - color:阴影颜色,可选参数。各浏览器默认颜色不相同。

3. z-index属性:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

(1)说明:该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

 - 默认值:auto
 - 继承性:no 
 - 版本:css2
 - javascript语法:object.style.zindex="1"

(2)可能的值

 - auto:默认。堆叠顺序与父元素相等。
 - number:设置元素的堆叠顺序。
 - inherit:规定应该从父元素继承 z-index 属性的值。

4. @keyframes规则

(1)animation实现动画效果:

 - 通过类似flash动画中的关键帧来声明一个动画;
 - 在animation属性中调用关键帧声明的动画,从而实现一个更为复杂的动画效果。

(2)浏览器兼容性:

 - 在chrome4+,Safari4.0+,Firefox5.0+至Firefox 16浏览器中需要添加各浏览器的私有属性。
 - 在IE 10+,Firefox 16+和opera 12+浏览器中支持animation的标准语法。
 - 在opera 16+,iOS Safari 3.2+,android browser 2.1+,blackberry browser 7.0+浏览器使用animation需要添加前缀-webkit。

(3)animation子属性

 - animation-name:指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes规则。
 - animation-duration:设置动画播放所需时间,一般以秒为单位。
 - animation-timing-function:设置动画的播放方式。
 - animation-delay:指定动画开始时间,一般以秒为单位。
 - animation-iteration-count:设置动画播放的循环次数。
 - animation-direction:设置动画的播放方向。
 - animation-play-state:设置动画的播放状态。
 - animation-fill-mode:设置动画的时间外属性。

(4)@keyframes语法

@keyframes IDENT{
    0%{
        /*css样式*/
    }
    percentage{
        /*css样式*/
    }
    100%{
        /*css样式*/
    }
}

5.效果演示:

这里写图片描述

6.代码展示:

<!DOCTYPE html>
<html>
<head>
    <title>叮当猫</title>
    <link rel="stylesheet" type="text/css" href="Doraemon.css">
</head>
<body>
    <div class="wrapper">
        <!--哆啦A梦-->
        <div class="doraemon">
            <!--头部-->
            <div class="head">
                <!--眼睛部分-->
                <div class="eyes">
                    <!--左眼-->
                    <div class="eye left">
                        <!--左眼球-->
                        <div class="eyeball bleft"></div>
                    </div>
                    <!--右眼-->
                    <div class=" eye right">
                        <!--右眼球-->
                        <div class="eyeball bright"></div>
                    </div>
                </div>
                <!--脸部-->
                <div class="face">
                    <!--白色脸面-->
                    <div class="whiteFace"></div>
                    <!--鼻头-->
                    <div class="nose">
                        <!--鼻头高光部分-->
                        <div class="light"></div>
                    </div>
                    <!--人中-->
                    <div class="philtrum"></div>
                    <!--嘴巴-->
                    <div class="mouth"></div>
                    <!--胡须-->
                    <div class="whiskers">
                        <div class="whisker r1 r160"></div>
                        <div class="whisker r2"></div>
                        <div class="whisker r3 r20"></div>
                        <div class="whisker l1 r20"></div>
                        <div class="whisker l2"></div>
                        <div class="whisker l3 r160"></div>
                    </div>
                </div>
                <!--脸部结束-->
            </div>
            <!--头部结束-->
            <!--项圈-->
            <div class="collar">
                <!--铃铛-->
                <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="body">
                <!--肚子-->
                <div class="belly"></div>
                <!--肚兜-->
                <div class="bellyband"></div>
                <!--口袋-->
                <div class="pocket"></div>
                <!--修饰口袋-->
                <div class="pocketAdorn"></div>
            </div>
            <!--身体结束-->
            <!--左手-->
            <div class="leftHand">
                <!--手臂-->
                <div class="arm"></div>
                <!--手掌-->
                <div class="palm"></div>
                <!--修饰手臂-->
                <div class="armAdorn"></div>
            </div>
            <!--左手结束-->
            <!--右手-->
            <div class="rightHand">
                <!--手臂-->
                <div class="arm"></div>
                <!--手掌-->
                <div class="palm"></div>
                <!--修饰手臂-->
                <div class="armAdorn"></div>
            </div>
            <!--右手结束-->
            <!--脚部-->
            <div class="foot">
                <!--左脚-->
                <div class="leftFoot"></div>
                <!--右脚-->
                <div class="rightFoot"></div>
                <!--腿间隙-->
                <div class="legGap"></div>
            </div>
            <!--脚部结束-->
        </div>
        <!--哆啦A梦结束-->
    </div>
</body>
</html>
.wrapper{
    margin: 50px 100px;
}
.doraemon{
    position: relative;
}
.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);
}
.face{
    /*让所有脸部元素可自由定位*/
    position: relative;
    /*脸在头部背景上面*/
    z-index: 2;
}
.whiteFace{
    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);
}
.nose{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background:#c93300;
    border:2px solid #000;
    position: absolute;
    top: 110px;
    left: 140px;
    /*鼻子在白色脸底上面*/
    z-index: 3;
}
.nose .light{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    /*通过阴影实现高光*/
    box-shadow: 19px 8px 5px #fff;  
}
.philtrum{
    width: 3px;
    height: 100px;
    background: #333;
    position: absolute;
    top: 143px;
    left: 155px;
    z-index: 3;
}
.mouth{
    width: 220px;
    height: 400px;
    /*通过底边框加上圆角模拟微笑嘴巴*/
    border-radius: 120px;
    border-bottom: 3px solid #333;
    position: absolute;
    top: -160px;
    left: 45px;
}
.eyes{
    position: relative;
    z-index: 3;
}
.eye{
    width: 72px;
    height: 82px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 35px;
    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;
    }
}

@-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;
    }
}
.eyes .left{
    left: 82px;
}
.eyes .right{
    left: 156px;
}
.eyeball{
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 7px;
    position: absolute;
    top: 40px;
}
.eye .bleft{
    left: 50px;
}
.eye .bright{
    left: 7px;
}
.whiskers{
    width: 220px;
    height: 80px;
    background: #fff;
    border-radius: 15px;
    position: absolute;
    top: 120px;
    left: 45px;
    z-index: 2;
}
.whisker{
    width: 60px;
    height: 2px;
    background: #333;
    position: absolute;
    z-index: 2; 
}
.l1{
    top: 25px;
    left: 0;
}
.l2{
    top: 45px;
    left: -2px;
}
.l3{
    top: 65px;
    left: 0;
}
.r1{
    top: 25px;
    left: 165px;
}
.r2{
    top: 45px;
    left: 167px;
}
.r3{
    top: 65px;
    left: 165px;
}
.r20{
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    -o-transform: rotate(200deg);
    transform: rotate(200deg);
}
.r160{
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    -o-transform: rotate(160deg);
    transform: rotate(160deg);
}
.collar{
    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;
}
.bell{
    width: 40px;
    height: 40px;
    _overflow: hidden; /*IE6 hack*/
    border-radius: 50px;
    border:2px solid #000;
    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;
}
.bell_line{
    width: 36px;
    height: 2px;
    background: #f9f12a;
    border: 2px solid #333;
    border-radius: 3px 3px 0 0;
    position: absolute;
    top: 10px;
}
.bell_circle{
    width: 12px;
    height: 10px;
    background: #000;
    border-radius: 5px;
    position: absolute;
    top: 20px;
    left: 14px;
}
.bell_under{
    width: 3px;
    height: 15px;
    background: #000;
    position: absolute;
    top: 27px;
    left: 18px;
}
.bell_light{
    width: 12px;
    height: 12px;
    border-radius: 10px;
    box-shadow: 19px 8px 5px #fff;
    position: absolute;
    top: -5px;
    left: 5px;
    opacity: 0.7;
}
.body{
    position: relative;
    top: -310px;
}
.belly{
    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;
    position: absolute;
    top: 265px;
    left: 50px;
}
.bellyband{
    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;
    top: 230px;
    left: 72px;
}
.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;
}
.pocketAdorn{
    width: 134px;
    height: 60px;
    background: #fff;
    border-bottom: 2px solid #000;
    position: absolute;
    top: 259px;
    left: 92px;
}
.leftHand{
    width: 100px;
    height: 100px;
    position: absolute;
    top:272px;
    left: -10px;
}
.rightHand{
    width: 100px;
    height: 100px;
    position: absolute;
    top:272px;
    left: 248px;
}
.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;
    top: 17px;
}
.leftHand .arm{
    /*背光一面使用纯色,使其有立体感*/
    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);
}
.rightHand .arm{
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.palm{
    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;
    top: 32px;
}
.leftHand .palm{
    left: -20px; 
}
.rightHand .palm{
    left: 40px;
}
.armAdorn{
    width: 5px;
    height: 45px;
    background: #07beea;
    position: relative;
    top: -45px;
}
.leftHand .armAdorn{
    /*同理,背光一面使用纯色,使其有立体感*/
    background: #0096be; 
    left: 60px;
}
.rightHand .armAdorn{
    left: 22px;
}
.foot{
    width: 280px;
    height: 40px;
    position: relative;
    top: 55px;
    left: 20px;
}
.leftFoot,.rightFoot{
    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;
    border-radius: 80px 60px 60px 40px;
    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
    position: relative;
}
.leftFoot{
    top: 65px;
    left: 8px;
}
.rightFoot{
    top: 31px;
    left: 141px;
}
.legGap{
    width: 20px;
    height: 10px;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
    background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
    background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
    /*制作半圆效果*/
    border: 2px solid #000;   
    border-bottom: none;
    border-radius: 40px 40px 0 0;
    position: relative;
    top: -11px;
    left: 130px;
}

没有更多推荐了,返回首页