查看: 350|回复: 0

[DIV/CSS] 如何使用CSS3画出一个叮当猫

发表于 2017-11-30 08:00:01
句号论坛

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

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. margin: 50px 0 0 500px;
  3. }
  4. .doraemon{
  5. position: relative;
  6. }
复制代码

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

  1. .doraemon .head {
  2. position:relative;
  3. width: 320px;
  4. height: 300px;
  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);
  12. }
复制代码

看看效果到底怎么样:

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

  1. /*脸部*/
  2. .doraemon .face {
  3. position: relative; /*让所有脸部元素可自由定位*/
  4. z-index: 2; /*脸在头部背景上面*/
  5. }
  6. /*白色脸底*/
  7. .doraemon .face .white {
  8. width: 265px; /*设置宽高*/
  9. height: 195px;
  10. border-radius: 150px;
  11. position: absolute; /*进行绝对定位*/
  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. position: relative;
  63. z-index: 3; /*眼睛在白色脸底下面*/
  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. .doraemon .eyes .eye .bright {
  94. left: 7px;
  95. }
复制代码

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

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

  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. width: 60px;
  15. height: 2px;
  16. background: #333;
  17. position: absolute;
  18. z-index: 2;
  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. width: 230px;
  4. height: 20px;
  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. border: 2px solid #000;
  11. border-radius: 10px;
  12. position: relative;
  13. top: -40px;
  14. left: 45px;
  15. z-index: 4;
  16. }
  17. /*铃铛*/
  18. .doraemon .choker .bell {
  19. width: 40px;
  20. height: 40px;
  21. _overflow: hidden; /*IE6 hack*/
  22. border: 2px solid #000;
  23. border-radius: 50px;
  24. background: #f9f12a;
  25. background: -webkit-gradient(linear, left top, left 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. position: absolute;
  30. top: 5px;
  31. left: 90px;
  32. }
  33. /*双横线*/
  34. .doraemon .choker .bell_line {
  35. width: 36px;
  36. height: 2px;
  37. background: #f9f12a;
  38. border: 2px solid #333;
  39. border-radius: 3px 3px 0 0;
  40. position: absolute;
  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. width: 3px;
  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. position: relative;
  76. top: -310px;
  77. }
  78. /*肚子*/
  79. .doraemon .bodys .body {
  80. width: 220px;
  81. height: 165px;
  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. width: 170px;
  94. height: 170px;
  95. background: #fff;
  96. 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));
  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. border: 2px solid #000;
  100. border-radius: 85px;
  101. position: absolute;
  102. left: 72px;
  103. top: 230px;
  104. }
  105. /*口袋*/
  106. .doraemon .bodys .pocket {
  107. width: 130px;
  108. height: 130px;
  109. border-radius: 65px;
  110. background: #fff;
  111. 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));
  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. border: 2px solid #000;
  115. position:absolute;
  116. top: 250px;
  117. left: 92px;
  118. }
  119. /*挡住口袋一半*/
  120. .doraemon .bodys .pocket_mask {
  121. width: 134px;
  122. height: 60px;
  123. background:#fff;
  124. border-bottom: 2px solid #000;
  125. position:absolute;
  126. top: 259px;
  127. left: 92px;
  128. }
复制代码

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

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

/

  1. *左右手*/
  2. .doraemon .hand_right, .doraemon .hand_left {
  3. height: 100px;
  4. width: 100px;
  5. position: absolute;
  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 top, left 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. border: 1px solid #000000;
  22. box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
  23. z-index: -1;
  24. position: relative;
  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(0, 0, 0, 0.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. width: 60px;
  49. height: 60px;
  50. border-radius: 30px;
  51. border: 2px solid #000;
  52. background: #fff;
  53. 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));
  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. position: absolute;
  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. height: 45px;
  71. width: 5px;
  72. background: #07beea;
  73. position: relative;
  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. width: 280px;
  89. height: 40px;
  90. position: relative;
  91. top: 55px;
  92. left: 20px;
  93. }
  94. /*左右脚共同样式*/
  95. .doraemon .foot .left, .doraemon .foot .right {
  96. width: 125px;
  97. height: 30px;
  98. background: #fff;
  99. background: -webkit-gradient(linear, right top, left 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. border: 2px solid #333;
  103. border-radius: 80px 60px 60px 40px;
  104. box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
  105. position: relative;
  106. }
  107. .doraemon .foot .left {
  108. left: 8px;
  109. top: 65px;
  110. }
  111. .doraemon .foot .right {
  112. top: 31px;
  113. left: 141px;
  114. }
  115. /*双脚之间的缝隙,加阴影使用立体感*/
  116. .doraemon .foot .foot_rewrite {
  117. width: 20px;
  118. height: 10px;
  119. background: #fff;
  120. background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
  121. background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
  122. background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
  123. /*制作半圆效果*/
  124. border: 2px solid #000;
  125. border-bottom: none;
  126. border-radius: 40px 40px 0 0;
  127. position: relative;
  128. top: -11px;
  129. left: 130px;
  130. _left: 127px;
  131. }
复制代码

好了,最后完整结果:

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

  1. /*眼珠*/
  2. .doraemon .eyes .eye .black {
  3. width: 14px;
  4. height: 14px;
  5. background: #000;
  6. border-radius: 7px;
  7. position: absolute;
  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. @-webkit-keyframes eyemove {
  17. 70%{
  18. margin:0 0 0 0;
  19. }
  20. 80% {
  21. margin: -22px 0 0 0;
  22. }
  23. 85% {
  24. margin: -22px 0 0 5px;
  25. }
  26. 90% {
  27. margin: -22px 10px 0 0;
  28. }
  29. 93% {
  30. margin: -22px 0 0 0;
  31. }
  32. 96% {
  33. margin: 0 0 0 0;
  34. }
  35. }
  36. @-moz-keyframes eyemove {
  37. 70% {
  38. margin: 0 0 0 0;
  39. }
  40. 80% {
  41. margin: -22px 0 0 0;
  42. }
  43. 85% {
  44. margin: -22px 0 0 5px;
  45. }
  46. 90% {
  47. margin: -22px 10px 0 0;
  48. }
  49. 93% {
  50. margin: -22px 0 0 0;
  51. }
  52. 96% {
  53. margin: 0 0 0 0;
  54. }
  55. }
  56. @-o-keyframes eyemove {
  57. 70% {
  58. margin: 0 0 0 0;
  59. }
  60. 80% {
  61. margin: -22px 0 0 0;
  62. }
  63. 85% {
  64. margin: -22px 0 0 5px;
  65. }
  66. 90% {
  67. margin: -22px 10px 0 0;
  68. }
  69. 93% {
  70. margin: -22px 0 0 0;
  71. }
  72. 96% {
  73. margin: 0 0 0 0;
  74. }
  75. }
  76. @keyframes eyemove {
  77. 70% {
  78. margin: 0 0 0 0;
  79. }
  80. 80% {
  81. margin: -22px 0 0 0;
  82. }
  83. 85% {
  84. margin: -22px 0 0 5px;
  85. }
  86. 90% {
  87. margin: -22px 10px 0 0;
  88. }
  89. 93% {
  90. margin: -22px 0 0 0;
  91. }
  92. 96% {
  93. margin: 0 0 0 0;
  94. }
  95. }
复制代码

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

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

以上是本文的全部内容,希望大家可以喜欢,动手去实践一下。



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条