欢迎访问 licqi IT技术
我们一直在努力

使用CSS3画出一个叮当猫

刚学习了这个案例,然后觉得比较好玩,就练习了一下。然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得。但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的 人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下:

使用CSS3画出一个叮当猫

PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈!热烈的笑脸

首先,先把HTML结构搭建好:

  1. <div class="wrapper"
  2.     <!--叮当猫整体--> 
  3.     <div class="doraemon"
  4.         <!--头部--> 
  5.         <div class="head"
  6.             <!--眼睛--> 
  7.             <div class="eyes"
  8.                 <div class="eye left"
  9.                     <!--眼珠--> 
  10.                     <div class="black bleft"></div> 
  11.                 </div> 
  12.                 <div class="eye right"
  13.                     <div class="black bright"></div> 
  14.                 </div> 
  15.             </div> 
  16.             <!--脸部--> 
  17.             <div class="face"
  18.                 <!--白色脸底--> 
  19.                 <div class="white"></div> 
  20.                 <!--鼻子--> 
  21.                 <div class="nose"
  22.                     <!--鼻子高光部分--> 
  23.                     <div class="light"></div> 
  24.                 </div> 
  25.                 <!--鼻子的竖线--> 
  26.                 <div class="nose_line"></div> 
  27.                 <!--嘴巴--> 
  28.                 <div class="mouth"></div> 
  29.                 <!--胡须--> 
  30.                 <div class="whiskers"
  31.                     <div class="whisker rTop r160"></div> 
  32.                     <div class="whisker rMiddle"></div> 
  33.                     <div class="whisker rBottom r20"></div> 
  34.                     <div class="whisker lTop r20"></div> 
  35.                     <div class="whisker lMiddle"></div> 
  36.                     <div class="whisker lBottom r160"></div> 
  37.                 </div> 
  38.             </div> 
  39.         </div> 
  40.         <!--脖子和铃铛--> 
  41.         <div class="choker"
  42.             <!--铃铛--> 
  43.             <div class="bell"
  44.                 <div class="bell_line"></div> 
  45.                 <div class="bell_circle"></div> 
  46.                 <div class="bell_under"></div> 
  47.                 <div class="bell_light"></div> 
  48.             </div> 
  49.         </div> 
  50.         <!--身体--> 
  51.         <div class="bodys"
  52.             <!--肚子--> 
  53.             <div class="body"></div> 
  54.             <!--肚兜--> 
  55.             <div class="wraps"></div> 
  56.             <!--口袋--> 
  57.             <div class="pocket"></div> 
  58.             <!--遮住一半口袋,使其呈现半圆--> 
  59.             <div class="pocket_mask"></div> 
  60.         </div> 
  61.         <!--右手--> 
  62.         <div class="hand_right"
  63.             <!--手臂--> 
  64.             <div class="arm"></div> 
  65.             <!--手掌--> 
  66.             <div class="circle"></div> 
  67.             <!--遮住手臂和身子交接处的线--> 
  68.             <div class="arm_rewrite"></div> 
  69.         </div> 
  70.         <!--左手--> 
  71.         <div class="hand_left"
  72.             <div class="arm"></div> 
  73.             <div class="circle"></div> 
  74.             <div class="arm_rewrite"></div> 
  75.         </div> 
  76.         <!--脚--> 
  77.         <div class="foot"
  78.             <div class="left"></div> 
  79.             <div class="right"></div> 
  80.              <!--双脚之间的缝隙--> 
  81.             <div class="foot_rewrite"></div> 
  82.         </div> 
  83.     </div> 
  84. </div> 

最好先把叮当猫的整体结构仔细研究一下,这对以后想要自己动手画别的人物形象很有帮助,思路会比较明朗。

接下来,我们按照头部,脖子,身体,脚部分别进行演示。首先将容器wrapper和叮当猫整体做一些基本的样式,叮当猫整体doraemon 设置position为relative,主要是为了便于 子元素/后代元素进行定位。

  1. .wrapper{ 
  2.     margin50px 0 0 500px
  3. .doraemon{ 
  4.     positionrelative

头部head的样式,因为叮当猫的头部不是正圆,所以宽高有一点偏差,然后使用border-radius将头部从矩形变成椭圆形,然后再使用径向渐变从右上角给背景来个放射性渐变,然后在加个阴影,使其更有立体感,background:#07bbee;是为了兼容低版本浏览器:

  1. .doraemon .head { 
  2.             position:relative
  3.             width320px
  4.             height300px
  5.             border-radius: 150px
  6.             background#07bbee
  7.             background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); 
  8.             background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); 
  9.             background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);           
  10.             border:2px solid #555
  11.             box-shadow:-5px 10px 15px rgba(0,0,0,0.45); 

看看效果到底怎么样:

使用CSS3画出一个叮当猫

惊讶 shenmgui ,这么丑,别急,慢慢让它活过来:

  1. /*脸部*/ 
  2.          .doraemon .face { 
  3.              positionrelative/*让所有脸部元素可自由定位*/ 
  4.              z-index2;    /*脸在头部背景上面*/ 
  5.          } 
  6.         /*白色脸底*/  
  7.         .doraemon .face .white { 
  8.             width265px;       /*设置宽高*/ 
  9.             height195px
  10.             border-radius: 150px
  11.             positionabsolute/*进行绝对定位*/ 
  12.             top: 75px
  13.             left: 25px
  14.             background#fff
  15.             /*此放射渐变也是使脸的左下角暗一些,看上去更真实*/ 
  16.             background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); 
  17.             background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); 
  18.             background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);         
  19.          } 
  20.         /*鼻子*/ 
  21.          .doraemon .face .nose{ 
  22.              width:30px
  23.              height:30px
  24.              border-radius:15px
  25.              background:#c93300
  26.              border:2px solid #000
  27.              position:absolute
  28.              top:110px
  29.              left:140px
  30.              z-index:3;   /*鼻子在白色脸底下面*/ 
  31.          } 
  32.         /*鼻子上的高光*/ 
  33.         .doraemon .face .nose .light { 
  34.             width:10px
  35.             height:10px
  36.             border-radius: 5px
  37.             box-shadow: 19px 8px 5px #fff;  /*通过阴影实现高光*/ 
  38.         } 
  39.          /*鼻子下的线*/ 
  40.          .doraemon .face .nose_line{ 
  41.              width:3px
  42.              height:100px
  43.              background:#333
  44.              position:absolute
  45.              top:143px
  46.              left:155px
  47.              z-index:3
  48.          } 
  49.          /*嘴巴*/ 
  50.          .doraemon .face .mouth{ 
  51.              width:220px
  52.              height:400px
  53.              /*通过底边框加上圆角模拟微笑嘴巴*/ 
  54.              border-bottom:3px solid #333
  55.              border-radius:120px
  56.              position:absolute
  57.              top:-160px
  58.              left:45px
  59.          } 
  60.          /*眼睛*/ 
  61.         .doraemon .eyes { 
  62.             positionrelative
  63.             z-index3/*眼睛在白色脸底下面*/ 
  64.         } 
  65.         /*眼睛共同的样式*/ 
  66.         .doraemon .eyes .eye{ 
  67.             width:72px
  68.             height:82px
  69.             background:#fff
  70.             border:2px solid #000
  71.             border-radius:35px 35px
  72.             position:absolute
  73.             top:40px
  74.         } 
  75.         /*眼珠*/ 
  76.         .doraemon .eyes .eye .black
  77.             width:14px
  78.             height:14px
  79.             background:#000
  80.             border-radius:7px
  81.             position:absolute
  82.             top:40px
  83.         } 
  84.         .doraemon .eyes .left
  85.             left:82px
  86.         } 
  87.         .doraemon .eyes .right { 
  88.             left: 156px
  89.         } 
  90.         .doraemon .eyes .eye .bleft { 
  91.             left: 50px
  92.         } 
  93.  
  94.         .doraemon .eyes .eye .bright { 
  95.             left: 7px
  96.         } 

写了这么多样式,结果是怎么样的呢:

使用CSS3画出一个叮当猫

生病 怎么看都觉得别扭,哦!还差胡须须和白色脸底的边框呢,咱给补上:

  1. /*胡须背景,主要用于挡住嘴巴的一部分,不要显得太长*/ 
  2.         .doraemon .whiskers{ 
  3.             width:220px
  4.             height:80px
  5.             background:#fff
  6.             border-radius:15px
  7.             position:absolute
  8.             top:120px
  9.             left:45px
  10.             z-index:2;   /*在鼻子和眼睛下面*/ 
  11.         } 
  12.         /*所有胡子的公用样式*/ 
  13.         .doraemon .whiskers .whisker { 
  14.             width60px
  15.             height2px
  16.             background#333
  17.             positionabsolute
  18.             z-index2
  19.         } 
  20.         /*右上胡子*/ 
  21.         .doraemon .whiskers .rTop { 
  22.             left: 165px
  23.             top: 25px
  24.         } 
  25.         /*右中胡子*/ 
  26.         .doraemon .whiskers .rMiddle { 
  27.             left: 167px
  28.             top: 45px
  29.         } 
  30.         /*右下胡子*/ 
  31.         .doraemon .whiskers .rBottom { 
  32.             left: 165px
  33.             top: 65px
  34.         } 
  35.         /*左上胡子*/ 
  36.         .doraemon .whiskers .lTop { 
  37.             left: 0
  38.             top: 25px
  39.         } 
  40.         /*左中胡子*/ 
  41.         .doraemon .whiskers .lMiddle { 
  42.             left: -2px
  43.             top: 45px
  44.         } 
  45.         /*左下胡子*/ 
  46.         .doraemon .whiskers .lBottom { 
  47.             left: 0
  48.             top: 65px
  49.         } 
  50.         /*胡子旋转角度*/ 
  51.         .doraemon .whiskers .r160 { 
  52.             -webkit-transform: rotate(160deg); 
  53.             -moz-transform: rotate(160deg); 
  54.             -ms-transform: rotate(160deg); 
  55.             -o-transform: rotate(160deg); 
  56.             transform: rotate(160deg); 
  57.         } 
  58.         .doraemon .whiskers .r20 { 
  59.             -webkit-transform: rotate(200deg); 
  60.             -moz-transform: rotate(200deg); 
  61.             -ms-transform: rotate(200deg); 
  62.             -o-transform: rotate(200deg); 
  63.             transform: rotate(200deg); 
  64.         } 

微笑 这样就对了,看着多舒服啊!趁热打铁,做脖子和身体:

  1. /*围脖*/ 
  2.         .doraemon .choker { 
  3.             width230px
  4.             height20px
  5.             background#c40
  6.             /*线性渐变 让围巾看上去更自然*/ 
  7.             background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400)); 
  8.             background: -moz-linear-gradient(center top,#c40,#800400); 
  9.             background: -ms-linear-gradient(center top,#c40,#800400); 
  10.             border2px solid #000
  11.             border-radius: 10px
  12.             positionrelative
  13.             top: -40px
  14.             left: 45px
  15.             z-index4
  16.         } 
  17.         /*铃铛*/ 
  18.         .doraemon .choker .bell { 
  19.             width40px
  20.             height40px
  21.             _overflowhidden/*IE6 hack*/ 
  22.             border2px solid #000
  23.             border-radius: 50px
  24.             background#f9f12a
  25.             background: -webkit-gradient(linear, left topleft bottom, from(#f9f12a),color-stop(0.5#e9e11a), to(#a9a100)); 
  26.             background: -moz-linear-gradient(top#f9f12a#e9e11a 75%,#a9a100); 
  27.             background: -ms-linear-gradient(top#f9f12a#e9e11a 75%,#a9a100); 
  28.             box-shadow: -5px 5px 10px rgba(0,0,0,0.25); 
  29.             positionabsolute
  30.             top: 5px
  31.             left: 90px
  32.         } 
  33.         /*双横线*/ 
  34.         .doraemon .choker .bell_line { 
  35.             width36px
  36.             height2px
  37.             background#f9f12a
  38.             border2px solid #333
  39.             border-radius: 3px 3px 0 0
  40.             positionabsolute
  41.             top: 10px
  42.         } 
  43.         /*黑点*/ 
  44.         .doraemon .choker .bell_circle{ 
  45.             width:12px
  46.             height:10px
  47.             background:#000
  48.             border-radius:5px
  49.             position:absolute
  50.             top:20px
  51.             left:14px
  52.         } 
  53.         /*黑点下的线*/ 
  54.         .doraemon .choker .bell_under{ 
  55.             width3px
  56.             height:15px
  57.             background:#000
  58.             position:absolute
  59.             left: 18px
  60.             top:27px
  61.         } 
  62.         /*铃铛高光*/ 
  63.         .doraemon .choker .bell_light{ 
  64.             width:12px
  65.             height:12px
  66.             border-radius:10px
  67.             box-shadow:19px 8px 5px #fff
  68.             position:absolute
  69.             top:-5px
  70.             left:5px
  71.             opacity:0.7
  72.         } 
  73.         /*身子*/ 
  74.         .doraemon .bodys { 
  75.             positionrelative
  76.             top: -310px
  77.         } 
  78.         /*肚子*/ 
  79.         .doraemon .bodys .body { 
  80.             width220px
  81.             height165px
  82.             background#07beea
  83.             background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5#0073b3),color-stop(0.75,#00b0e0), to(#0096be)); 
  84.             background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); 
  85.             background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); 
  86.             border:2px solid #333
  87.             position:absolute
  88.             top:265px
  89.             left:50px
  90.         } 
  91.         /*白色肚兜*/ 
  92.             .doraemon .bodys .wraps { 
  93.                 width170px
  94.                 height170px
  95.                 background#fff
  96.                 background: -webkit-gradient(linear, right topleft 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)); 
  97.                 background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); 
  98.                 background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); 
  99.                 border2px solid #000
  100.                 border-radius: 85px
  101.                 positionabsolute
  102.                 left: 72px
  103.                 top: 230px
  104.             } 
  105.             /*口袋*/ 
  106.             .doraemon .bodys .pocket { 
  107.                 width130px
  108.                 height130px
  109.                 border-radius: 65px
  110.                 background#fff
  111.                 background: -webkit-gradient(linear, right topleft 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)); 
  112.                 background: -moz-linear-gradient(right top#fff#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%#fff); 
  113.                 background: -ms-linear-gradient(right top#fff#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%#fff); 
  114.                 border2px solid #000
  115.                 position:absolute
  116.                 top: 250px
  117.                 left: 92px
  118.             } 
  119.             /*挡住口袋一半*/ 
  120.             .doraemon .bodys .pocket_mask { 
  121.                 width134px
  122.                 height60px
  123.                 background:#fff
  124.                 border-bottom2px solid #000
  125.                 position:absolute
  126.                 top: 259px
  127.                 left: 92px
  128.            } 

好吧,脖子和身子都有啦!上图:

使用CSS3画出一个叮当猫

现在看起来有点像摆设品,不过笑容还是那么单纯,好了,赶紧把手脚做出来:

  1. /*左右手*/ 
  2.             .doraemon .hand_right, .doraemon .hand_left { 
  3.                 height100px
  4.                 width100px
  5.                 positionabsolute
  6.                 top: 272px
  7.                 left: 248px
  8.             } 
  9.             /*左手*/ 
  10.             .doraemon .hand_left { 
  11.                 left: -10px
  12.             } 
  13.             /*手臂公共部分*/ 
  14.             .doraemon .arm { 
  15.                 width:80px
  16.                 height:50px
  17.                 background#07beea
  18.                 background: -webkit-gradient(linear, left topleft bottom, from(#07beea),color-stop(0.85,#07beea), to(#555)); 
  19.                 background: -moz-linear-gradient(center top#07BEEA#07BEEA 85%#555); 
  20.                 background: -ms-linear-gradient(center top#07BEEA#07BEEA 85%#555); 
  21.                 border1px solid #000000
  22.                 box-shadow: -10px 7px 10px rgba(0000.35); 
  23.                 z-index-1
  24.                 positionrelative
  25.             } 
  26.             /*右手手臂*/ 
  27.             .doraemon .hand_right .arm { 
  28.                 top: 17px
  29.                 -webkit-transform: rotate(35deg); 
  30.                 -moz-transform: rotate(35deg); 
  31.                 -ms-transform: rotate(35deg); 
  32.                 -o-transform: rotate(35deg); 
  33.                 transform: rotate(35deg); 
  34.             } 
  35.             /*左手手臂*/ 
  36.             .doraemon .hand_left .arm { 
  37.                 top: 17px
  38.                 background#0096be;   /*背光一面使用纯色,使其有立体感*/ 
  39.                 box-shadow: 5px -7px 10px rgba(0000.25); 
  40.                 -webkit-transform: rotate(145deg); 
  41.                 -moz-transform: rotate(145deg); 
  42.                 -ms-transform: rotate(145deg); 
  43.                 -o-transform: rotate(145deg); 
  44.                 transform: rotate(145deg); 
  45.             } 
  46.             /*圆形手掌公共部分*/ 
  47.             .doraemon .circle { 
  48.                 width60px
  49.                 height60px
  50.                 border-radius: 30px
  51.                 border2px solid #000
  52.                 background#fff
  53.                 background: -webkit-gradient(linear, right topleft bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999)); 
  54.                 background: -moz-linear-gradient(right top#fff#fff 50%#eee 70%#ddd 80%,#999); 
  55.                 background: -ms-linear-gradient(right top#fff#fff 50%#eee 70%#ddd 80%,#999); 
  56.                 positionabsolute
  57.             } 
  58.             /*右手手掌*/ 
  59.             .doraemon .hand_right .circle { 
  60.                 left: 40px
  61.                 top: 32px
  62.             } 
  63.             /*左手手掌*/ 
  64.             .doraemon .hand_left .circle { 
  65.                 left: -20px
  66.                 top: 32px
  67.             } 
  68.             /*手臂和身体结合处,使用背景遮住边框*/ 
  69.             .doraemon .arm_rewrite { 
  70.                 height45px
  71.                 width5px
  72.                 background#07beea
  73.                 positionrelative
  74.             } 
  75.             /*右手结合处*/ 
  76.             .doraemon .hand_right .arm_rewrite { 
  77.                 top: -45px
  78.                 left: 22px
  79.             } 
  80.             /*左手结合处*/ 
  81.             .doraemon .hand_left .arm_rewrite { 
  82.                 top: -45px
  83.                 left: 60px
  84.                 background#0096be/*同理,背光一面使用纯色,使其有立体感*/ 
  85.             } 
  86.             /*脚部*/ 
  87.             .doraemon .foot { 
  88.                 width280px
  89.                 height40px
  90.                 positionrelative
  91.                 top: 55px
  92.                 left: 20px
  93.             } 
  94.             /*左右脚共同样式*/ 
  95.             .doraemon .foot .left, .doraemon .foot .right { 
  96.                 width125px
  97.                 height30px
  98.                 background#fff
  99.                 background: -webkit-gradient(linear, right topleft bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999)); 
  100.                 background: -moz-linear-gradient(right top#fff#fff 75%#eee 85%#999); 
  101.                 background: -ms-linear-gradient(right top#fff#fff 75%#eee 85%#999); 
  102.                 border2px solid #333
  103.                 border-radius: 80px 60px 60px 40px
  104.                 box-shadow: -6px 0 10px rgba(0000.35); 
  105.                 positionrelative
  106.             } 
  107.             .doraemon .foot .left { 
  108.                 left: 8px
  109.                 top: 65px
  110.             } 
  111.         
  112.             .doraemon .foot .right { 
  113.                 top: 31px
  114.                 left: 141px
  115.             } 
  116.             /*双脚之间的缝隙,加阴影使用立体感*/ 
  117.             .doraemon .foot .foot_rewrite { 
  118.                 width20px
  119.                 height10px
  120.                 background#fff
  121.                 background: -webkit-gradient(linear, right topleft bottom, from(#666),color-stop(0.83,#fff), to(#fff)); 
  122.                 background: -moz-linear-gradient(right top#666#fff 83%#fff); 
  123.                 background: -ms-linear-gradient(right top#666#fff 83%#fff); 
  124.                 /*制作半圆效果*/ 
  125.                 border2px solid #000;    
  126.                 border-bottomnone
  127.                 border-radius: 40px 40px 0 0
  128.                 positionrelative
  129.                 top: -11px
  130.                 left: 130px
  131.                 _left: 127px
  132.             } 

好了,最后完整结果:

使用CSS3画出一个叮当猫

看一下,效果是不是和一开始的一样呢 大笑 ,虽然做好了,但是还是可以让它动起来的,比如眼睛,我们可以给它加个动画效果,让眼睛转动起来:

  1. /*眼珠*/ 
  2.         .doraemon .eyes .eye .black { 
  3.             width14px
  4.             height14px
  5.             background#000
  6.             border-radius: 7px
  7.             positionabsolute
  8.             top: 40px
  9.             -webkit-animation: eyemove 3s linear infinite; 
  10.             -moz-animation: eyemove 3s linear infinite; 
  11.             -ms-animation: eyemove 3s linear infinite; 
  12.             -o-animation: eyemove 3s linear infinite; 
  13.             animation: eyemove 3s linear infinite; 
  14.         } 
  15.  
  16.         /*让眼睛动起来*/ 
  17.         @-webkit-keyframes eyemove { 
  18.             70%
  19.                 margin:0 0 0 0
  20.             } 
  21.             80% { 
  22.                 margin-22px 0 0 0
  23.             } 
  24.  
  25.             85% { 
  26.                 margin-22px 0 0 5px
  27.             } 
  28.  
  29.             90% { 
  30.                 margin-22px 10px 0 0
  31.             } 
  32.  
  33.             93% { 
  34.                 margin-22px 0 0 0
  35.             } 
  36.  
  37.             96% { 
  38.                 margin0 0 0 0
  39.             } 
  40.         } 
  41.  
  42.         @-moz-keyframes eyemove { 
  43.             70% { 
  44.                 margin0 0 0 0
  45.             } 
  46.  
  47.             80% { 
  48.                 margin-22px 0 0 0
  49.             } 
  50.  
  51.             85% { 
  52.                 margin-22px 0 0 5px
  53.             } 
  54.  
  55.             90% { 
  56.                 margin-22px 10px 0 0
  57.             } 
  58.  
  59.             93% { 
  60.                 margin-22px 0 0 0
  61.             } 
  62.  
  63.             96% { 
  64.                 margin0 0 0 0
  65.             } 
  66.         } 
  67.  
  68.         @-o-keyframes eyemove { 
  69.             70% { 
  70.                 margin0 0 0 0
  71.             } 
  72.  
  73.             80% { 
  74.                 margin-22px 0 0 0
  75.             } 
  76.  
  77.             85% { 
  78.                 margin-22px 0 0 5px
  79.             } 
  80.  
  81.             90% { 
  82.                 margin-22px 10px 0 0
  83.             } 
  84.  
  85.             93% { 
  86.                 margin-22px 0 0 0
  87.             } 
  88.  
  89.             96% { 
  90.                 margin0 0 0 0
  91.             } 
  92.         } 
  93.         @keyframes eyemove { 
  94.             70% { 
  95.                 margin0 0 0 0
  96.             } 
  97.  
  98.             80% { 
  99.                 margin-22px 0 0 0
  100.             } 
  101.  
  102.             85% { 
  103.                 margin-22px 0 0 5px
  104.             } 
  105.  
  106.             90% { 
  107.                 margin-22px 10px 0 0
  108.             } 
  109.  
  110.             93% { 
  111.                 margin-22px 0 0 0
  112.             } 
  113.  
  114.             96% { 
  115.                 margin0 0 0 0
  116.             } 
  117.         } 

OK,这样,眼睛就会动了,有兴趣的可以试一下,这里就无法展示了。但是如果你有什么更好的动画效果也可以尝试,那么这个案例就结束了。

PS:虽然这只是一个案例,不过确实帮助我开阔思维,而且其实做一个这样的效果,可能会花费很多时间,至少对我来说目前确实是这样子,主要难点还是布局定位和颜色的合理搭配,才能使形象更加逼真生动!可能也有人对PS或者Flash等图形处理软件不是很熟,对用CSS3画出一些人物或者其他效果比较没有头绪,那么就可以去一些网站参考设计师们的设计构图,图形分解等相关设计知识,帮助我们更好地理解,这里推荐几个网站:

站酷网:http://www.zcool.com.cn/

闪吧:http://www.flash8.net/

网页设计师联盟:http://www.68design.net/

蓝色理想:http://www.blueidea.com/

【编辑推荐】

  1. 10个优秀的HTML5 CSS3下拉菜单制作教程
  2. 30个jQuery & CSS3加载动画和进度栏插件
  3. 用 CSS3 和 JavaScript 制作径向动画菜单
  4. 8款经典实用的jQuery/CSS3应用插件
  5. 超酷体验 绚丽的jQuery和CSS3应用插件

赞(0) 打赏
未经允许不得转载:licqi IT技术 » 使用CSS3画出一个叮当猫
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏