开心学习
当前位置：Web前端 > > 正文

ps如何画一个哆啦a梦（CSS画出一个可爱神奇的多啦A梦）

时间：2022-01-14 02:01:33类别：Web前端

ps如何画一个哆啦a梦

CSS画出一个可爱神奇的多啦A梦

小叮当简单颜色单一，操作起来也很容易上手。接下来的一个实例就是用css画出一个多啦A梦，首先将其分为头部，和身体。然后，再根据身体各部分细节进行进一步的具体刻画。
 
由于最近一直在学习JavaWeb方面的东西，所以，我的这个小叮当就是用jsp页面进行映衬。
 
代码如下：首先是写jsp页面，将其分成多个块，然后再分块操作：
 

  • XML/HTML Code复制内容到剪贴板
    1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
    2. <%   
    3. String path = request.getContextPath();   
    4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
    5. %>  
    6.   
    7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    8. <html>  
    9.   <head>  
    10.     <base href="<%=basePath%>">  
    11.     <link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">  
    12.     <link rel="stylesheet" type="text/css" href="css/DLAM.css">  
    13.     <title>here</title>  
    14.        
    15.     <meta http-equiv="pragma" content="no-cache">  
    16.     <meta http-equiv="cache-control" content="no-cache">  
    17.     <meta http-equiv="expires" content="0">       
    18.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    19.     <meta http-equiv="description" content="This is my page">  
    20.     <!--  
    21.     <link rel="stylesheet" type="text/css" href="styles.css">  
    22.     -->  
    23.   
    24.   </head>     
    25.   <body>  
    26.   <li class="doraemon">  
    27.     <li class="head">  
    28.         <li class="eyes">  
    29.            <li class="eye left"><li class="black bleft"></li></li>  
    30.            <li class="eye right"><li class="black bright"></li></li>  
    31.         </li>  
    32.            
    33.         <li class="face">  
    34.            <li class="white"></li>  
    35.            <li class="nose"><li class="light"></li></li>  
    36.            <li class="nose_line"></li>  
    37.            <li class="mouth"></li>  
    38.            <li class="whiskers">  
    39.                     <li class="whisker rTop r160"></li>  
    40.                     <li class="whisker rt"></li>  
    41.                     <li class="whisker rBottom r20"></li>  
    42.                     <li class="whisker lTop r20"></li>  
    43.                     <li class="whisker lt"></li>  
    44.                     <li class="whisker lBottom r160"></li>  
    45.            </li>  
    46.         </li>  
    47.     </li>  
    48.        
    49.     <li class="choker">  
    50.         <li class="bell">  
    51.             <li class="bell_line"></li>  
    52.             <li class="bell_circle"></li>  
    53.             <li class="bell_under"></li>  
    54.             <li class="bell_light"></li>  
    55.         </li>  
    56.     </li>  
    57.        
    58.     <li class="bodys">  
    59.          <li class="body"></li>  
    60.          <li class="wraps"></li>  
    61.          <li class="pocket"></li>  
    62.          <li class="pocket_mask"></li>  
    63.     </li>  
    64.        
    65.     <li class="hand_right">  
    66.            <li class="arm"></li>  
    67.         <li class="circle"></li>  
    68.          <li class="arm_rewrite"></li>  
    69.     </li>  
    70.        
    71.     <li class="hand_left">  
    72.         <li class="arm"></li>  
    73.         <li class="circle"></li>  
    74.          <li class="arm_rewrite"></li>  
    75.     </li>  
    76.        
    77.     <li class="foot">  
    78.          <li class="left"></li>  
    79.         <li class="right"></li>  
    80.         <li class="foot_rewrite"></li>  
    81.     </li>  
    82.   
    83.   </li>  
    84.       
    85.   </body>    
    86. </html>  
    87.   

    • 再接下来就是每一个li的细致描写刻画：

  • XML/HTML Code复制内容到剪贴板
    1. @CHARSET "UTF-8";   
    2. .CC{   
    3.       font-size:100px;   
    4.       font-weight:600;   
    5.       font-family:"华文楷体";   
    6.       text-align: center;   
    7. }   
    8.   
    9. .doraemon{   
    10.     position:relative;   
    11.     margin-top:5px;   
    12.     margin-left:530px;   
    13. }   
    14. .doraemon .head{   
    15.     width:320px;   
    16.     height:300px;   
    17.     border-radius:150px;   
    18.     background:#07bbee;   
    19.     background:-webkit-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);   
    20.     background:-moz-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);   
    21.     background:-ms-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);   
    22.     border:#555 2px solid;   
    23.     box-shadow:-5px 10px 15px rgba(0,0,0,0.45);   
    24.     position:relative;   
    25. }   
    26.   
    27. .doraemon .face{   
    28.     position:relative;   
    29.     z-index:2;   
    30. }   
    31. .doraemon .face .white{   
    32.     border:#000 2px solid;   
    33.     width:265px;   
    34.     height:195px;   
    35.     border-radius:150px 150px;   
    36.     position:absolute;   
    37.     top:75px;left:25px;   
    38.     background:#fff;   
    39.     background:-webkit-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);   
    40.     background:-moz-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);   
    41.     background:-ms-radial-gradient(right top,#fff 10%, #eee 75%,#eee 80%,#999 90%,#444);   
    42. }   
    43. .doraemon .face .nose{   
    44.     border: 2px solid #000;   
    45.     width:30px;   
    46.     height:30px;   
    47.     border-radius:30px;   
    48.     position:absolute;   
    49.     background:#c93300;   
    50.     top:110px;left:140px;   
    51.     z-index:3;   
    52. }   
    53. .doraemon .face .nose .light{   
    54.     border-radius:5px;   
    55.     box-shadow:19px 8px 5px #FFF;   
    56.     width:10px;   
    57.     height:10px;   
    58. }   
    59. .doraemon .face .nose_line{   
    60.     background:#333;   
    61.     width:3px;   
    62.     height:100px;   
    63.     top:140px;left:155px;   
    64.     position:absolute;   
    65.     z-index:3;   
    66. }   
    67. .doraemon .face .mouth{   
    68.     width:220px;   
    69.     height:400px;   
    70.     border-radius:120px;   
    71.     border-bottom:3px solid #333;   
    72.     position:absolute;   
    73.     top:-160px;left:45px;   
    74. }   
    75. .doraemon .eyes{   
    76.     position:relative;   
    77.     z-index:3;   
    78. }   
    79. .doraemon .eyes .eye{   
    80.     width:72px;   
    81.     height:82px;   
    82.     position:absolute;   
    83.     top:40px;   
    84.     background:#fff;   
    85.     border: 2px solid #000;   
    86.     border-radius:35px 35px;   
    87. }   
    88. .doraemon .eyes .eye .black{   
    89.     width:14px;   
    90.     height:14px;   
    91.     background:#000;   
    92.     border-radius:14px;   
    93.     position:relative;   
    94.     top:40px;   
    95. }       
    96. .doraemon .eyes .left{   
    97.     left:82px;   
    98. }   
    99. .doraemon .eyes .right{   
    100.     left:156px;   
    101. }   
    102. .doraemon .eyes .eye .bleft{   
    103.     left:50px;   
    104. }   
    105. .doraemon .eyes .eye .bright{   
    106.     left:7px;   
    107. }   
    108. .doraemon .whiskers{   
    109.     width:220px;   
    110.     height:80px;   
    111.     background:#fff;   
    112.     position:relative;   
    113.     border-radius:15px;   
    114.     top:120px;left:45px;   
    115.     z-index:2;   
    116. }   
    117. .doraemon .whiskers .whisker{   
    118.     background:#333;   
    119.     width:60px;   
    120.     height:2px;   
    121.     position:absolute;   
    122.     z-index:2;   
    123. }   
    124. .doraemon .whiskers .rTop{   
    125.     top:25px;left:165px;   
    126. }   
    127. .doraemon .whiskers .rt{   
    128.     top:45px;left:167px;   
    129. }   
    130. .doraemon .whiskers .rBottom{   
    131.     top:65px;left:165px;   
    132. }       
    133. .doraemon .whiskers .lTop{   
    134.     top:25px;left:0px;   
    135. }   
    136. .doraemon .whiskers .lt{   
    137.     top:45px;left:-2px;   
    138. }   
    139. .doraemon .whiskers .lBottom{   
    140.     top:65px;left:0px;   
    141. }       
    142. .doraemon .whiskers .r160{   
    143.     transform:rotate(160deg);   
    144.     -webkit-transform:rotate(160deg);   
    145. }       
    146. .doraemon .whiskers .r20{   
    147.     transform:rotate(20deg);   
    148.     -webkit-transform:rotate(20deg);   
    149. }   
    150.   
    151. .doraemon .choker{   
    152.     position:relative;   
    153.     z-index:4;   
    154.     top:-40px;left:45px;   
    155.     background:#c40;   
    156.     background:-webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));   
    157.     background:-moz-linear-gradient(center top,#c40,#800400);   
    158.     background:-ms-linear-gradient(center top,#c40,#800400);   
    159.     border: 2px solid #000000;   
    160.     border-radius:10px 10px 10px 10px;   
    161.     width:230px;   
    162.     height:20px;   
    163. }   
    164. .doraemon .choker .bell{   
    165.     width:40px;   
    166.     height:40px;   
    167.     _overflow:hidden;   
    168.     border-radius:50px;   
    169.     border: 2px solid #000;   
    170.     background:#f9f12a;   
    171.     background:-webkit-gradient(linear,left top,left bottom,from(#f9f12a),color-stop(0.5,#e9e11a),to(#a9a100));   
    172.     background:-moz-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);   
    173.     background:-ms-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);   
    174.     box-shadow:-5px 5px 10px rgba(0,0,0,0.25);   
    175.     position:relative;   
    176.     top:5px;left:90px;   
    177. }   
    178. .doraemon .choker .bell_line{   
    179.     background:#c40;   
    180.     border-radius:3px 3px 0px 0px;   
    181.     border:2px solid #333333;   
    182.     height:2px;width:36px;   
    183.     position:relative;   
    184.     top:10px;   
    185. }   
    186. .doraemon .choker .bell_circle{   
    187.     background:#000;   
    188.     border-radius:5px;   
    189.     height:10px;width:12px;   
    190.     position:relative;   
    191.     top:10px;   
    192.     left:13px;   
    193. }   
    194. .doraemon .choker .bell_circle{   
    195.     background:#000;   
    196.     border-radius:5px;   
    197.     height:10px;width:12px;   
    198.     position:relative;   
    199.     top:10px;   
    200.     left:13px;   
    201. }   
    202. .doraemon .choker .bell_under{   
    203.     background:#000;   
    204.     height:15px;width:3px;   
    205.     top:10px;   
    206.     left:18px;   
    207.     position:relative;   
    208. }   
    209. .doraemon .choker .bell_light{   
    210.     border-radius:10px;   
    211.     box-shadow:19px 8px 5px #fff;   
    212.     height:11px;width:11px;   
    213.     position:relative;   
    214.     top:-34px;   
    215.     left:4px;   
    216.     opacity:0.7;   
    217. }   
    218.   
    219.   
    220. .doraemon .bodys{   
    221.     position:relative;   
    222.     top:-310px;   
    223. }   
    224. .doraemon .bodys .body{   
    225.     background:#07beea;   
    226.     background:-webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),to(#0096be));   
    227.     background:-moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);   
    228.     background:-ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);   
    229.     border: 2px solid #333;   
    230.     height:165px;width:220px;   
    231.     position:absolute;   
    232.     top:265px;   
    233.     left:50px;   
    234. }   
    235. .doraemon .bodys .wraps{   
    236.     background:#fff;   
    237.     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));   
    238.     background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 75%,#eee 83%,#999 90%,#444 95%,#000);   
    239.     background:-ms-linear-gradient(right top,#fff,#fff 50%,#eee 75%,#eee 83%,#999 90%,#444 95%,#000);   
    240.     border: 2px solid #000;   
    241.     border-radius:85px;   
    242.     position:absolute;   
    243.     height:170px;width:170px;   
    244.     top:230px;   
    245.     left:72px;   
    246. }   
    247.   
    248. .doraemon .bodys .pocket{   
    249.     position:relative;   
    250.     height:130px;width:130px;   
    251.     border-radius:65px;   
    252.     background:#fff;   
    253.     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));   
    254.     background:-moz-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);   
    255.     background:-ms-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);   
    256.     border: 2px solid #000;   
    257.     top:250px;   
    258.     left:92px;   
    259. }   
    260. .doraemon .bodys .pocket_mask{   
    261.     position:relative;   
    262.     height:60px;width:134px;   
    263.     background:#fff;   
    264.     border-bottom:2px solid #000;   
    265.     top:125px;   
    266.     left:92px;   
    267. }   
    268.   
    269. .doraemon .hand_right{   
    270.     height:100px;width:100px;   
    271.     position:absolute;   
    272.     top:272px;   
    273.     left:248px;   
    274. }   
    275. .doraemon .hand_left{   
    276.     height:100px;width:100px;   
    277.     position:absolute;   
    278.     top:272px;   
    279.     left:-10px;   
    280. }   
    281. .doraemon .arm{   
    282.     background:#07beea;   
    283.     background:-webkit-gradient(linear,left top,left bottom,from(#07beea),color-stop(0.85,#07beea),to(#555));   
    284.     background:-moz-linear-gradient(center top,#07beea,#07beea 85%,#555);   
    285.     background:-ms-linear-gradient(center top,#07beea,#07beea 85%,#555);   
    286.     border: 1px solid #000000;   
    287.     position:relative;   
    288.     height:50px;width:80px;   
    289.     box-shadow:-10px 7px 10px rgba(0,0,0,0.35);   
    290.     z-index:-1;   
    291. }   
    292.   
    293. .doraemon .hand_right .arm{   
    294.     top:17px;   
    295.     transform:rotate(35deg);   
    296.     -webkit-transform:rotate(35deg);   
    297. }   
    298. .doraemon .hand_left .arm{   
    299.     top:17px;   
    300.     background:#0096be;   
    301.     box-shadow:5px -7px 10px rgba(0,0,0,0.25);   
    302.     transform:rotate(145deg);   
    303.     -webkit-transform:rotate(145deg);   
    304. }   
    305. .doraemon .circle{   
    306.     background:#fff;   
    307.     background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.5,#fff),color-stop(0.7,#eee),color-stop(0.8,#ddd),to(#999));   
    308.     background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 70%,#ddd 80%,#999);   
    309.     position:absolute;   
    310.     height:60px;width:60px;   
    311.     border: 2px solid #000;   
    312.     border-radius:30px;   
    313. }   
    314.   
    315. .doraemon .hand_right .circle{   
    316.     left:40px;   
    317.     top:32px;   
    318. }   
    319. .doraemon .hand_left .circle{   
    320.     left:-20px;   
    321.     top:32px;   
    322. }   
    323. .doraemon .arm_rewrite{   
    324.     background:#07beea;   
    325.     position:relative;   
    326.     height:45px;width:5px;   
    327. }   
    328. .doraemon .hand_right .arm_rewrite{   
    329.     left:20px;   
    330.     top:-45px;   
    331. }       
    332. .doraemon .hand_left .arm_rewrite{   
    333.     left:60px;   
    334.     top:-45px;   
    335.     background:#0096be;   
    336. }       
    337. .doraemon .foot{   
    338.     height:40px;   
    339.     left:20px;   
    340.     position:relative;   
    341.     top:-141px;   
    342.     width:280px;       
    343. }       
    344. .doraemon .foot .left{   
    345.     background:#fff;   
    346.     background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));   
    347.     background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);   
    348.     background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);   
    349.     border: 2px solid #333;   
    350.     border-radius:80px 60px 60px 40px;   
    351.     box-shadow:-6px 0 10px rgba(0,0,0,0.35);   
    352.     height:30px;   
    353.     left:14px;   
    354.     position:relative;   
    355.     top:69px;   
    356.     width:125px;   
    357. }       
    358. .doraemon .foot .right{   
    359.     background:#fff;   
    360.     background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));   
    361.     background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);   
    362.     background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);   
    363.     border: 2px solid #333;   
    364.     border-radius:80px 60px 60px 40px;   
    365.     box-shadow:-6px 0 10px rgba(0,0,0,0.35);   
    366.     height:30px;   
    367.     left:141px;   
    368.     position:relative;   
    369.     top:39px;   
    370.     width:125px;   
    371. }   
    372. .doraemon .foot .foot_rewrite{   
    373.     position:relative;   
    374.     top:0px;   
    375.     left:132px;   
    376.     _left:127px;   
    377.     width:20px;   
    378.     height:11px;   
    379.     background:#fff;   
    380.     background:-webkit-gradient(linear,right top,left bottom,from(#666),color-stop(0.83,#fff),to(#fff));   
    381.     background:-moz-linear-gradient(right top,#666,#fff 83%,#fff);   
    382.     background:-ms-linear-gradient(right top,#666,#fff 83%,#fff);   
    383.     border-top:2px solid #000;   
    384.     border-right:2px solid #000;   
    385.     border-left:2px solid #000;   
    386.     border-top-right-radius:40px;   
    387.     border-top-left-radius:40px;   
    388. }       
    389.   

    • 这个是整体的描绘，接下来，我来根据自己的理解更加深刻地理解每一个特效的来源。
     
    background:-webkit-radial-gradien ：这个属性是讲颜色的渐变，比如哆啦A梦的蓝色，从右上再到左下，颜色逐渐加深，线性渐变；
     
    线性渐变实例：

    ps如何画一个哆啦a梦（CSS画出一个可爱神奇的多啦A梦）

    border-radius：转换为圆角；   
     
    z-index：指定该元素的层叠顺序，比如说图片，若z-index为-1，覆盖在图片上面的字就会显示出来。
     
    rgba(0,0,0,0.45)：表示透明度的；
     
    —overflow:设置当元素的内容溢出其区域时发生的事情,hidden,隐藏。
     
    transform:转换和旋转；
     
    这里还有一个动画效果，目的是让小叮当的眼睛动起来~ 

  • CSS Code复制内容到剪贴板
    1. <style type="text/css">   
    2.     @-webkit-keyframes eyemove{   
    3.         80%{margin:0; }   
    4.         85%{margin:-20px 0 0 0;}   
    5.         90%{margin:0 0 0 0;}   
    6.         93%{margin:0 0 0 7px;}   
    7.         96%{margin:0 0 0 0;}   
    8. 标签：
      css 多啦A梦
    • 上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习