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

前端  /  管理员 发布于 7年前   203

小叮当简单颜色单一，操作起来也很容易上手。接下来的一个实例就是用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.   <div class="doraemon">  
  27.     <div class="head">  
  28.         <div class="eyes">  
  29.            <div class="eye left"><div class="black bleft"></div></div>  
  30.            <div class="eye right"><div class="black bright"></div></div>  
  31.         </div>  
  32.            
  33.         <div class="face">  
  34.            <div class="white"></div>  
  35.            <div class="nose"><div class="light"></div></div>  
  36.            <div class="nose_line"></div>  
  37.            <div class="mouth"></div>  
  38.            <div class="whiskers">  
  39.                     <div class="whisker rTop r160"></div>  
  40.                     <div class="whisker rt"></div>  
  41.                     <div class="whisker rBottom r20"></div>  
  42.                     <div class="whisker lTop r20"></div>  
  43.                     <div class="whisker lt"></div>  
  44.                     <div class="whisker lBottom r160"></div>  
  45.            </div>  
  46.         </div>  
  47.     </div>  
  48.        
  49.     <div class="choker">  
  50.         <div class="bell">  
  51.             <div class="bell_line"></div>  
  52.             <div class="bell_circle"></div>  
  53.             <div class="bell_under"></div>  
  54.             <div class="bell_light"></div>  
  55.         </div>  
  56.     </div>  
  57.        
  58.     <div class="bodys">  
  59.          <div class="body"></div>  
  60.          <div class="wraps"></div>  
  61.          <div class="pocket"></div>  
  62.          <div class="pocket_mask"></div>  
  63.     </div>  
  64.        
  65.     <div class="hand_right">  
  66.            <div class="arm"></div>  
  67.         <div class="circle"></div>  
  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.         <div class="foot_rewrite"></div>  
  81.     </div>  
  82.   
  83.   </div>  
  84.       
  85.   </body>    
  86. </html>  
  87.   


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

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;    <

  • 上一条：
    CSS3中Transform动画属性用法详解
    下一条：
    CSS制作梦幻彩虹效果

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客