css代码实现的哆啦A梦

最新推荐文章于 2024-09-13 07:33:22 发布

十三lucifer

最新推荐文章于 2024-09-13 07:33:22 发布

阅读量3.1k

点赞数 2

分类专栏：前端文章标签： html5 css 前端移动端

本文链接：https://blog.csdn.net/qq_26739383/article/details/52577599

版权

这篇博客记录了作者初次学习CSS时，耗时七八小时完成的一个项目——用CSS代码实现哆啦A梦的绘制。代码支持谷歌、火狐和IE浏览器，同时在移动端也有良好表现。

摘要由CSDN通过智能技术生成

之前刚学完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;