今天有点无聊，照着网上的图写了个哆啦A梦，无技术可言，纯考耐心。

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

  <title>哆啦A梦</title>

  <style>

     *{padding:0;margin:0;}

     img,a{border:none;}

     .canvas{position: relative;width: 400px;height: 400px;margin: 30px auto;}

     header{position: absolute;z-index: -1;top:40px;left:100px;width: 200px;height: 200px;border-radius: 200px;-moz-border-radius:200px;border:1px solid #333;background-color:rgb(15,185,230);}

     .eyes{position: absolute;z-index: 1;top:35px;left:48px;width: 48px;height: 50px;border-radius: 20px;-moz-border-radius:20px;background-color: #fff;border:1px solid #333;}

     .eye{left:98px;}

     .eye .eyes-in{left: 10px;}

     .eyes-in{position: absolute;z-index: 2;top:32px;left:31px;width: 10px;height: 10px;border-radius: 10px;-moz-border-radius:10px;background-color: black;}

     .face{position: absolute;z-index: 0;top:59px;left: 13px;width: 170px;height: 125px;border-radius: 130px;-moz-border-radius:130px;background-color: #fff;border:1px solid #333;}

     .nose-in {

        height: 13px;width: 13px;border-radius:13px;float:right;margin-right:1px;margin-top:1px;

        background: -webkit-radial-gradient(#fff, gray); /* Safari 5.1 - 6.0 */

        background: -o-radial-gradient(red, green); /* Opera 11.6 - 12.0 */

        background: -moz-radial-gradient(red, green); /* Firefox 3.6 - 15 */

        background: radial-gradient(#fff, rgb(179,43,5) 70%); /* 标准的语法（必须放在最后） */

      }

      .nose{position: absolute;z-index: 2;top:19px;left:73px;width:20px;height:20px;border-radius:20px;background-color:rgb(179,43,5);border:1px solid #333;}

      .line{position: absolute;z-index: 2;top:39px;left:82px;width: 1px;height: 65px;border-right: 2px solid #333;}

      .beard{position: absolute;z-index: 1;width: 45px;height: 1px;border-bottom: 1px solid #333;}

      .beard1{

        transform:rotate(15deg);

        -ms-transform:rotate(15deg); /* IE 9 */

        -webkit-transform:rotate(15deg); /* Safari and Chrome */

      }

      .beard2{transform:rotate(165deg);-ms-transform:rotate(165deg);-webkit-transform:rotate(165deg);}

      .pos1{top: 45px;left:19px;}

      .pos2{top: 60px;left:19px;}

      .pos3{top: 78px;left:19px;}

      .pos4{top: 45px;left:100px;}

      .pos5{top: 60px;left:100px;}

      .pos6{top: 78px;left:100px;}

      .mouse {width: 100px;height: 40px;position: absolute;bottom: 19px;left: 35px;border-bottom: 2px solid #222;border-radius: 50%;}

      .nav{position: absolute;top:-3px;left:-5px;z-index: 4;width: 123px;height: 15px;background-color: rgb(179,43,5);border:1px solid #333;border-top-left-radius: 7px;border-top-right-radius:7px;border-bottom-left-radius:7px;border-bottom-right-radius:7px;}

      .back{position: absolute;top: 13px;left: -1px;z-index: 0;width:120px;height:15px;background-color: rgb(15,185,230);}

      .body{position: absolute;top:228px;left: 144px;z-index: 4;}

      .circle{position: absolute;top:-3px;left: 6px;z-index: 3;width: 100px;height: 100px;border-radius: 100px;-moz-border-radius:100px;border:1px solid #333;background-color: #fff;}

      .half-circle{position: absolute;top:10px;left: 10px;z-index: 3;width: 80px;height: 80px;border-radius: 80px;border-bottom: 1.5px solid #333;border-radius: 80px;}

      .lid{position: absolute;top:50px;left: 10px;z-index: 3;width: 80px;height: 1px;border-bottom:1px solid #333;}

      .m-line{position: absolute;top:21px;left:13px;width: 1px;height: 10px;border-right: 2px solid #333;}

      .h-line{width: 100%;height: 1px;border-top: 2px solid #333;}

      .h1-line{position: absolute;top:6px;}

      .h2-line{position: absolute;top:10px;}

      .h-eye{top: 14px;left: 11px;width:8px;height:8px;z-index: 4;}

      .mark{position: absolute;top:0px;left: 40px;z-index: 5;width: 30px;height: 30px;background-color: rgb(238,238,78);border-radius: 30px;border:1px solid #333;overflow: hidden;}

      .leg{position: absolute;top:58px;left: -15px;z-index: 2;width: 140px;height: 80px;border-right: 1px solid #333;border-left: 1px solid #333;background-color: rgb(15,185,230);}

      .l-hand{position: absolute;top:13px;left: 117px;z-index: 1;width: 37px;height: 96px;border-left: 1px solid #333;border-right: 1px solid #333;background-color: rgb(15,185,230);transform:rotate(135deg);-ms-transform:rotate(135deg); /* IE 9 */-webkit-transform:rotate(135deg); /* Safari and Chrome */}

      .r-hand{position: absolute;top:13px;left: -40px;z-index: 1;width: 37px;height: 96px;border-left: 1px solid #333;border-right: 1px solid #333;background-color: rgb(15,185,230);transform:rotate(45deg);-ms-transform:rotate(45deg); /* IE 9 */-webkit-transform:rotate(45deg); /* Safari and Chrome */}

      .l-arm{position: absolute;top:59px;left:-71px;z-index: 2;}

      .r-arm{position: absolute;top:59px;left: 135px;z-index: 2;}

      .bot{position: absolute;top:126px;left: 47px;z-index: 3;width: 20px;height: 20px;border-radius: 20px;border-top: 1px solid #333;background-color: #fff;}

      .l-leg{position: absolute;top:136px;left: -27px;z-index: 3;width: 80px;height: 25px;border:1px solid #333;border-top-left-radius: 25px;border-bottom-left-radius: 20px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;background-color: #fff;}

      .r-leg{position: absolute;top:136px;left: 58px;z-index: 3;width: 77px;height: 25px;border:1px solid #333;border-top-right-radius: 25px;border-bottom-right-radius: 20px;border-top-left-radius: 25px;border-bottom-left-radius: 25px;background-color: #fff;}

  </style>

 </head>

 <body>

    <div class="canvas">

      <h2></h2>

      <header>

        <div class="eyes">

          <div class="eyes-in"></div>

        </div>

        <div class="eyes eye">

          <div class="eyes-in"></div>

        </div>

        <div class="face">

          <div class="nose">

            <div class="nose-in"></div>

          </div>

          <div class="line"></div>

          <div class="beard beard1 pos1"></div>

          <div class="beard pos2"></div>

          <div class="beard beard2 pos3"></div>

          <div class="beard beard2 pos4"></div>

          <div class="beard pos5"></div>

          <div class="beard beard1 pos6"></div>

          <div class="mouse"></div>

        </div>

      </header>

      <div class="body">

            <div class="nav"></div>

            <div class="back"></div>

            <div class="mark">

              <div class="h-line h1-line"></div>

              <div class="h-line h2-line"></div>

              <div class="eyes-in h-eye"></div>

              <div class="m-line"></div>

            </div>

            <div class="circle">

              <div class="lid"></div>

              <div class="half-circle"></div>

            </div>

            <div class="leg"></div>

            <div class="l-hand"></div>

            <div class="r-hand"></div>

            <div class="eyes l-arm"></div>

            <div class="eyes r-arm"></div>

            <div class="bot"></div>

            <div class="l-leg"></div>

            <div class="r-leg"></div>

          </div>

    </div>

 </body>

</html>

纯css画哆啦A梦的更多相关文章

  1. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  3. div+css制作哆啦A梦

    纯CSS代码加上 制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: 下面代码同学可以查看一下,每个线条及椭 ...

  4. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  5. 【原创】纯CSS画黄金梅丽号！

    代码如下 <!DOCTYPE html> <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAni ...

  6. 纯CSS画的基本图形

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  7. Android用canvas画哆啦A梦

    先上图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  8. 用纯CSS画大白

    纯CSS打造网页大白知识点:      首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...

  9. java 画 哆啦A梦

    package Demo;import javax.imageio.ImageIO;import java.awt.*;import java.awt.image.BufferedImage;impo ...

随机推荐

  1. 操作native window的QxtWindowSystem （好像是一个IM的一部分）

    http://libqxt.bitbucket.org/doc/0.6/qxtwindowsystem.html https://github.com/psi-plus/plugins/blob/ma ...

  2. 窗口嵌入到另一个窗口（VC和QT都有）

    1.用vc新建一个dialog1工程.属性默认. 2.insert一个dialog2,改为child. 3.在dialog1中包含dialog2头文件,在一个按钮事件中显示dialog2: Cdial ...

  3. linux系统CPU,内存,磁盘,网络流量监控脚本

    前序 1,#cat /proc/stat/ 信息包含了所有CPU活动的信息,该文件中的所有值都是从系统启动开始累积到当前时刻 2,#vmstat –s 或者#vmstat 虚拟内存统计 3, #cat ...

  4. cocos2dx 坐标和锚点

    cocos2dx中使用opengl坐标系,左下角为坐标原点,在大部分情况下,都是使用这种坐标系的. 当我们创建了一个渲染对象到窗口后,那么这个对象本身也是也是有自己的坐标系的,这种坐标系是节点自己的坐 ...

  5. POJ 3581 Sequence（后缀数组）

    [题目链接] http://poj.org/problem?id=3581 [题目大意] 给出一个数列,将这个数列分成三段,每段分别翻转,使得其字典序最小,输出翻转后的数列. [题解] 首先,第一个翻 ...

  6. JavaScript之字符串引号的使用技巧

    在JavaScript中可以随意使用引号,但是最好根据字符串包含的字符来选择. 1.如果字符串里面包含了单引号,那就把字符串放在双引号里面 var age = "this is 'pig'? ...

  7. NGUI Button 3中点击事件的触发

    NGUI事件的种类很多,比如点击.双击.拖动.滑动等等,他们处理事件的原理几乎万全一样,本文只用按钮来举例. 1.直接监听事件 把下面脚本直接绑定在按钮上,点击按钮触发的方法名必须为OnClick,当 ...

  8. XGPush集成（信鸽集成）demo

    #import "AppDelegate.h" #import "XGPush.h" #import "XGSetting.h" #defi ...

  9. iOS 10 创建iMessage App

    原文作者 澳大利亚19岁少年--Davis Allie ----原文地址 时值中秋佳节, 送给出门在外的程序猿们 ! 骚年们, 自己写个表情包斗图可否 ! 斗-seal.svg.png 第一. 介绍 ...

  10. [Swust OJ 838]--最优价值(0-1背包+数学)

    题目链接:http://acm.swust.edu.cn/problem/838/ Time limit(ms): 1000 Memory limit(kb): 10000 Description 我 ...