你的位置:首页 > 网页设计

[网页设计]使用CSS3画出一个叮当猫


原文出处: 郭锦荣  欢迎分享原创到伯乐头条刚学习了这个案例,然后觉得比较好玩,就练习了一下。然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得。但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下: PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈! 首先,先把HTML结构搭建好:XHTML 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384  <div >  <!--叮当猫整体-->  <div >    <!--头部-->    <div >      <!--眼睛-->      <div >        <div >          <!--眼珠-->          <div ></div>        </div>        <div >          <div ></div>        </div>      </div>      <!--脸部-->      <div >        <!--白色脸底-->        <div ></div>        <!--鼻子-->        <div >          <!--鼻子高光部分-->          <div ></div>        </div>        <!--鼻子的竖线-->        <div ></div>        <!--嘴巴-->        <div ></div>        <!--胡须-->        <div >          <div ></div>          <div ></div>          <div ></div>          <div ></div>          <div ></div>          <div ></div>        </div>      </div>    </div>    <!--脖子和铃铛-->    <div >      <!--铃铛-->      <div >        <div ></div>        <div ></div>        <div ></div>        <div ></div>      </div>    </div>    <!--身体-->    <div >      <!--肚子-->      <div ></div>      <!--肚兜-->      <div ></div>      <!--口袋-->      <div ></div>      <!--遮住一半口袋,使其呈现半圆-->      <div ></div>    </div>    <!--右手-->    <div >      <!--手臂-->      <div ></div>      <!--手掌-->      <div ></div>      <!--遮住手臂和身子交接处的线-->      <div ></div>    </div>    <!--左手-->    <div >      <div ></div>      <div ></div>      <div ></div>    </div>    <!--脚-->    <div >      <div ></div>      <div ></div>       <!--双脚之间的缝隙-->      <div ></div>    </div>  </div></div>最好先把叮当猫的整体结构仔细研究一下,这对以后想要自己动手画别的人物形象很有帮助,思路会比较明朗。接下来,我们按照头部,脖子,身体,脚部分别进行演示。首先将容器wrapper和叮当猫整体做一些基本的样式,叮当猫整体doraemon 设置position为relative,主要是为了便于 子元素/后代元素进行定位。CSS 123456  .wrapper{  margin: 50px 0 0 500px;}.doraemon{  position: relative;}头部head的样式,因为叮当猫的头部不是正圆,所以宽高有一点偏差,然后使用border-radius将头部从矩形变成椭圆形,然后再使用径向渐变从右上角给背景来个放射性渐变,然后在加个阴影,使其更有立体感,background:#07bbee;是为了兼容低版本浏览器:CSS 123456789101112  .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);}看看效果到底怎么样:  shenmgui ,这么丑,别急,慢慢让它活过来:CSS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596  /*脸部*/     .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;    }写了这么多样式,结果是怎么样的呢:  怎么看都觉得别扭,哦!还差胡须须和白色脸底的边框呢,咱给补上:CSS 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364  /*胡须背景,主要用于挡住嘴巴的一部分,不要显得太长*/    .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);    }  这样就对了,看着多舒服啊!趁热打铁,做脖子和身体:CSS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128  /*围脖*/    .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; /*IE6 hack*/      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;      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;      }好吧,脖子和身子都有啦!上图: 现在看起来有点像摆设品,不过笑容还是那么单纯,好了,赶紧把手脚做出来:CSS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132  /*左右手*/      .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: 55px;        left: 20px;      }      /*左右脚共同样式*/      .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;        border-radius: 80px 60px 60px 40px;        box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);        position: relative;      }      .doraemon .foot .left {        left: 8px;        top: 65px;      }       .doraemon .foot .right {        top: 31px;        left: 141px;      }      /*双脚之间的缝隙,加阴影使用立体感*/      .doraemon .foot .foot_rewrite {        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;        _left: 127px;      }好了,最后完整结果: 看一下,效果是不是和一开始的一样呢  ,虽然做好了,但是还是可以让它动起来的,比如眼睛,我们可以给它加个动画效果,让眼睛转动起来:CSS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117  /*眼珠*/    .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;      }    }     @-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;      }    }OK,这样,眼睛就会动了,有兴趣的可以试一下,这里就无法展示了。但是如果你有什么更好的动画效果也可以尝试,那么这个案例就结束了。  针对程序员的原生APP,以共享知识技能为目的,以悬赏方式的在线互动交互平台 。  我们拥有高达近20人顶尖的技术团队,以及优秀的产品及运营团队。团队领军人 物均在行业内有10年以上的丰富经验。  现在我们正在招募原始的参与英雄,您将同我们一起改变程序员的工作方式,改 变程序员的世界!同时也会有丰厚的报酬。作为我们的原始的参与者,您将同我们一 起体验这款程序员神器,您可以提出专业的建议,我们会虚心采纳。每一个人都会是 英雄,而您就会是我们需要的英雄!同时您也可以邀请您的朋友一起参与这场英雄的 招募互动。  广招原始参与英雄,共行颠覆程序员工作方式之盛事,特此悬赏,报酬丰厚,望 共赴盛举。  来?还是不来?  接头人暗号:1955246408 (QQ)