css代码实现的哆啦A梦

最新推荐文章于 2024-05-14 07:59:01 发布
十三lucifer
最新推荐文章于 2024-05-14 07:59:01 发布
阅读量3.2k
点赞数 2
CC 4.0 BY-SA版权
分类专栏：前端文章标签： html5 css 前端移动端
本文链接：https://blog.youkuaiyun.com/qq_26739383/article/details/52577599
前端专栏收录该内容
3 篇文章
订阅专栏
这篇博客记录了作者初次学习CSS时，耗时七八小时完成的一个项目——用CSS代码实现哆啦A梦的绘制。代码支持谷歌、火狐和IE浏览器，同时在移动端也有良好表现。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
之前刚学完CSS时，写的一段代码，花了七八个小时才写完，定位太花时间了。网上有很多版本，但这是原汁原味的新手写法。支持谷歌火狐IE，手机的自带浏览器也支持，附上代码。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>哆啦A梦</title>
    <style type="text/css">
    .entirety{
      width: 500px;
      height: 680px;
      border:1px solid black;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
    }
      .head{
        width: 300px;
        height: 300px;
        border-radius: 150px;
        border: 2px solid #333;
        background-image: -webkit-radial-gradient(99% 1%, #fff , #0C99C7 75%, black 100%);
          background-image: -moz-radial-gradient(99% 1%, #fff , #0C99C7 75%, black 100%);
          background-image: -ms-radial-gradient(99% 1%, #fff , #0C99C7 75%, black 100%);
        box-shadow: -5px 5px 15px 2px #888 ;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
      }
      .face{
        width: 250px;
        height: 210px;
        border-radius: 175px;
        background-color: #fff;
        position: relative;
        left: 25px;
        top: 65px;
      }
      .left_eye{
        width: 60px;
        height: 70px;
        border-radius: 30px;
        border: 2px solid black;
        background-color: #fff;
        position: relative;
        top: -170px;
        left: 87px;
      }
      .left_eyeball{
        width: 12px;
        height: 12px;
        border-radius: 6px;
        background-color: black;
        position: relative;
        top:10px;
        left:40px;
        -webkit-animation-name: cat;
        -webkit-animation-duration: 2s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: backwards;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
      }
      .right_eye{
        width: 60px;
        height: 70px;
        border-radius: 30px;
        border: 2px solid black;
        background-color: #fff;
        position: relative;
        top: -242px;
        left: 149px;
      }
      .right_eyeball{
        width: 12px;
        height: 12px;
        border-radius: 6px;
        background-color: black;
        position: relative;
        top:8px;
        left:10px;
        -webkit-animation-name: cat;
        -webkit-animation-duration: 2s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: backwards;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
      }
      @keyframes cat {
       from { transform: translate(0, 0); }
       20% { transform: translate(7px, 7px); }
       40% { transform: translate(0px, 14px); }
       60% { transform: translate(7px, 21px); }
       80% { transform: translate(0px, 28px); }
       to { transform: translate(7px, 35px); }
      }
      .nose{
        width: 28px;
        height: 28px;
        border-radius: 14px;
        border: 2px solid black;
        background-image: -webkit-radial-gradient(10px at 80% 40%,#fff,#cb3a00);
        position: relative;
        top: -254px;
        left: 133px;
      }
      .mouth{
        width: 1px;
        height: 100px;
        border: 1px solid black;
        background-color: black;
        position: relative;
        top: -458px;
        left:147px;
      }
      .smile{
        width: 200px;
        height: 200px;
        border-radius: 100px;
        border-bottom: 4px solid black;
        position: relative;
        left:48px;
        top:-354px;
      }
      .gai{
        width: 200px;
        height: 65px;
        background-color: #fff;
        position: relative;
        top:100px;
      }
      .beard{
        width: 70px;
        height: 1px;
        border: 0.3px solid black;
        background-color: black;
      }
      .lt{
        position: relative;
        top:-555px;
        left:40px;
        transform: rotate(15deg);
      }
      .lm{
        position: relative;
        top:-535px;
        left:40px;
      }
      .lb{
        position: relative;
        top:-515px;
        left:40px;
        transform: rotate(-15deg);
      }
      .gt{
        position: relative;
        top:-564px;
        left:185px;
        transform: rotate(-15deg);
      }
      .gm{
        position: relative;
        top:-544px;
        left:185px;
      }
      .gb{
        position: relative;
        top:-524px;
        left:185px;
        transform: rotate(15deg);
      }
      .body{
         width:200px;
         height: 200px;
         background-color: #07abdd;
         border: 2px solid #333;
         position: relative;
         top:290px;
         left: 148px;
         z-index: 10;
       }
       .tummy{
         width: 150px;
         height: 150px;
         border-radius: 75px;
         background-color: #fff;
         border: 2px solid #000;
         position: relative;
         left: 25px;
         top: -10px;
       }
        .pocket{
         width: 120px;
         height: 120px;
         border-radius: 60px;
         background-color: #fff;
         border: 2px solid #000;
         position: relative;
         left: 15px;
         top: 15px;
         }
         .gai_2{
           width: 124px;
           height: 62px;
           background-color: #fff;
           border-top-left-radius: 50px;
           border-top-right-radius: 50px;
           border-bottom: 2px solid black;
           position: relative;
           left: -2px;
           top: -2px;
         }
         .left_hand{
           width: 70px;
           height: 55px;
           background-color: #07abdd;
           border: 2px solid #333;
           position: relative;
           top: 120px;
           left: 98px;
           transform-origin: 0 50%;
           transform: rotate(-30deg);
           box-shadow: -5px 2px 10px 2px #333;
         }
         .right_hand{
           width: 70px;
           height: 55px;
           background-color: #07abdd;
           border: 2px solid #333;
           position: relative;
           top: 23px;
           left: 336px;
           transform-origin: 0 50%;
           transform: rotate(30deg);
           box-shadow: -5px 2px 10px 2px #333;
         }
         .left_palm{
           width: 70px;
           height: 70px;
           border-radius: 35px;
           border: 2px solid #333;
           background-color: #fff;
           position: relative;
           left: 50px;
           top:3px;
         }
         .right_palm{
           width: 70px;
           height: 70px;
           border-radius: 35px;
           border: 2px solid #333;
           background-color: #fff;
           position: relative;
           left: 373px;
           top:-73px;
         }
         .rod{
           width: 210px;
           height: 25px;
           border-radius: 100px;
           border: 2px solid #000;
           background-image: linear-gradient(to top,#640C04,#B13206);
           position: relative;
           left: 143px;
           top: -200px;
           z-index: 20;
         }
         .gai_3{
           width: 5px;
           height: 60px;
           background-color:#07abdd;
           position: relative;
           left: 148px;
           top: -215px;
           z-index: 15
         }
         .gai_4{
           width: 5px;
           height: 60px;
           background-color:#07abdd;
           position: relative;
           left: 348px;
           top: -275px;
           z-index: 15;
         }
         .dang{
           width: 20px;
           height:20px;
           border-radius: 10px;
           background-color: #fff;
           border: 2px solid #333;
           position: relative;
           left: 238px;
           top: -140px;
           z-index: 15;
         }
         .dang_gai{
           width: 24px;
           height: 10px;
           background-color: #fff;
           position: relative;
           top: 12px;
           left: -2px;
         }
         .left_foot{
           width: 110px;
           height: 30px;
           border: 2px solid #333;
           border-top-right-radius: 45px;
           border-bottom-right-radius: 45px;
           border-top-left-radius: 65px;
           border-bottom-left-radius: 45px;
           background-color: #fff;
           position: relative;
           left: 130px;
           top:-157px;
           z-index: 15;
           box-shadow: -1px 0px 10px 2px #333;
         }
         .right_foot{
           width: 110px;
           height: 30px;
           border: 2px solid #333;
           border-top-right-radius: 65px;
           border-bottom-right-radius: 45px;
           border-top-left-radius: 45px;
           border-bottom-left-radius: 45px;
           background-color: #fff;
           position: relative;
           left: 255px;
           top:-191px;
           z-index: 15;
           box-shadow: -1px 1px 10px 2px #333;
         }
         .bell{
           width: 36px;
           height: 36px;
           border-radius: 18px;
           background-image: radial-gradient(10px at 75% 25%,#fff,#CDC60B);
           border: 2px solid #000;
           position: relative;
           left:230px;
           top: -430px;
           z-index: 30;
         }
         .inbell_1{
           width: 34px;
           height: 3px;
           border: 2px solid #000;
           border-top-left-radius: 3px;
           border-top-right-radius: 4px;
           background-color: none;
           position: relative;
           top: 9px;
           left: -1px;
         }
         .inbell_2{
           width:10px;
           height: 10px;
           border-radius: 5px;
           background-color: #000;
           position: relative;
           top: 13px;
           left: 12px;
         }
         .inbell_3{
           width: 2px;
           height: 10px;
           background-color: #000;
           position: relative;
           left: 16px;
           top: 10px;
         }
    </style>
  </head>
  <body>
    <div class="entirety">
     <div class="head">
      <div class="face"></div>
      <div class="left_eye">
        <div class="left_eyeball"></div>
      </div>
      <div class="right_eye">
        <div class="right_eyeball"></div>
      </div>
      <div class="nose"></div>
        <div class="smile">
          <div class="gai"></div>
        </div>
      <div class="mouth"></div>
      <div class="beard lt"></div>
      <div class="beard lm"></div>
      <div class="beard lb"></div>
      <div class="beard gt"></div>
      <div class="beard gm"></div>
      <div class="beard gb"></div>
     </div>


     <div class="body">
        <div class="tummy">
          <div class="pocket">
            <div class="gai_2">
            </div>
          </div>
        </div>
     </div>


     <div class="left_hand"></div>
     <div class="right_hand"></div>

     <div class="left_palm"></div>
     <div class="right_palm"></div>

     <div class="rod"></div>


     <div class="gai_3"></div>
     <div class="gai_4"></div>

     <div class="dang">
       <div class="dang_gai"></div>
     </div>

     <div class="left_foot"></div>
     <div class="right_foot"></div>


     <div class="bell">
       <div class="inbell_1"></div>
       <div class="inbell_2"></div>
       <div class="inbell_3"></div>
     </div>

    </div>
  </body>
</html>