哆啦A梦

HTML代码块

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>哆啦A梦</title><link rel="stylesheet" type="text/css" href="css/doraemon.css"/></head><body><div class="doraemon"><div class="head"><div class="face"><div class="eyes"><div class="left_eye"></div><div class="right_eye"></div></div><div class="nose"></div><div class="mouth"><div class="cavity"><div class="left_tongue"></div><div class="right_tongue"></div></div></div><div class="left_lip"></div><div class="right_lip"></div><div class="left-beards"></div><div class="right-beards"></div></div></div><div class="body"><div class="twitter"><div class="bell"><div class="point"></div></div></div><div class="pockets"></div><div class="left_hand"></div><div class="right_hand"></div></div><div class="foot"><div class="left_foot"></div><div class="right_foot"></div><div class="pants"></div></div></div></body>
</html>

CSS代码块

1.margin：auto；//水平居中

2. justify-content:center;//水平居中

align-items:center;//垂直居中

要和display：flex；一起使用

3.用到了float，transform，position定位 ，伪类：before，after

*{margin: 0;padding: 0;
}
html,body{width: 100%;height: 100vh;box-sizing: border-box;/*浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。*/justify-content: center;/*水平居中*/align-items: center;/*垂直居中*/display: -webkit-flex;
}
.doraemon{width: 600px;height: 600px;/*border: 10px solid green;*/
}/*头*/
.doraemon>.head{margin: auto;width: 320px;height: 320px;border: 2px solid black;border-radius: 50%;background: deepskyblue;
}/*脸*/
.doraemon>.head>.face{margin: auto;width: 280px;height: 270px;border: 2px solid black;border-radius: 50%;background: white;transform: translateY(47px);z-index: -1;
}/*眼睛*/
.doraemon>.head>.face>.eyes{margin: auto;width: 150px;/*眼睛盒子大小*/height: 80px;/*border: 2px solid black;*/display:flex;/*行样式显示*/transform: translateY(-32px);}
.doraemon>.head>.face>.eyes>.left_eye{margin: auto;width: 60px;/*眼睛的大小*/height: 80px;border: 2px solid black;border-radius:50%;background:white;transform: translateX(7px);/*左眼向右移动*/
}
.doraemon>.head>.face>.eyes>.right_eye{margin: auto;width: 60px;height: 80px;border: 2px solid black;border-radius:50%;background:white;transform: translateX(-7px);/*右眼向左移动*/
}/*眼珠*/
.doraemon>.head>.face>.eyes>*:before{margin:50% auto;content: "";display: block;width: 10px;height: 18px;border:2px solid black;border-radius: 50%;background: black;
}
.doraemon>.head>.face>.eyes>.left_eye:before{transform: translateX(10px);
}
.doraemon>.head>.face>.eyes>.right_eye:before{transform: translateX(-10px);
}/*眼白*/
.doraemon>.head>.face>.eyes>*:after{margin:-70% auto;content: "";display: block;width: 3px;height: 3px;border:2px solid white;border-radius: 50%;background: white;
}
.doraemon>.head>.face>.eyes>.left_eye:after{transform: translateX(10px);
}
.doraemon>.head>.face>.eyes>.right_eye:after{transform: translateX(-10px);
}/*鼻子*/
.doraemon>.head>.face>.nose{margin:auto;width:35px;height: 35px;border: 2px solid black;border-radius: 50%;background:crimson;transform: translateY(-53px);
}
.doraemon>.head>.face>.nose:before{content: "";display: block;width: 10px;height: 10px;border: 1px solid white;border-radius: 50%;background: white;transform: translate(3px ,4px);
}
.doraemon>.head>.face>.nose:after{content: "";display: block;width: 20px;height: 20px;border: 1px solid brown;border-radius: 50%;background:brown;transform: translate(9px ,0px);
}/*嘴巴*/
.doraemon>.head>.face>.mouth{margin: auto;width: 200px;height: 110px;/*border: 2px solid black;*/overflow: hidden;
}/*口腔*/
.doraemon>.head>.face>.mouth>.cavity{margin: auto;width: 200px;height: 250px;border: 2px solid black;border-radius:50% ;background:darkred;transform: translate(-2px,-57%);overflow: hidden;
}/*舌头*/
.doraemon>.head>.face>.mouth>.cavity>.left_tongue{width: 100px;height: 125px;/*border: 2px solid black;*/border-radius:50% 50% 0 0;background: red;transform:  translate(30px,170px) rotate(-45deg);
}
.doraemon>.head>.face>.mouth>.cavity>.right_tongue{width: 100px;height: 125px;/*border: 2px solid black;*/border-radius:50% 50% 0 0;background: red;transform:  translate(70px,45px)  rotate(45deg);
}
/*嘴唇*/
.doraemon>.head>.face>.left_lip{margin: auto;width: 102px;height: 17px;border: 2px solid black;border-color:transparent transparent black black;border-radius:50% ;background: white;float: left;transform: translate(38px,-120px) rotate(-5deg);}
.doraemon>.head>.face>.left_lip:before{content: "";display: block;width: 60px;height: 70px;border: 2px solid black;border-color:black transparent transparent black;border-radius:50% ;background: white;transform: translate(-29px,-62px) rotate(-32deg);}
.doraemon>.head>.face>.right_lip{margin: auto;width: 102px;height: 17px;border: 2px solid black;border-color:transparent black black transparent;border-radius:50% ;background: white;float: right;transform: translate(-38px,-120px) rotate(5deg);}
.doraemon>.head>.face>.right_lip:before{content: "";display: block;width: 60px;height: 70px;border: 2px solid black;border-color:black black transparent transparent;border-radius:50% ;background: white;transform: translate(66px,-62px) rotate(32deg);
}
.doraemon>.head>.face>.right_lip:after{content: "";display: block;width: 3px;height: 57px;background: black;transform: translate(-2px,-118px) rotate(-5deg);
}
/*胡须*/
.doraemon>.head>.face>.left-beards{width: 90px;height: 3px;background: black;transform: translate(0px,-170px) rotate(4deg);float: left;
}
.doraemon>.head>.face>.left-beards:before{content: " ";display: block;width: 85px;height: 3px;background: black;transform: translate(5px,-40px) rotate(20deg);
}
.doraemon>.head>.face>.left-beards:after{content: " ";display: block;width: 90px;height: 3px;background: black;transform: translate(5px,30px) rotate(-15deg);
}
.doraemon>.head>.face>.right-beards{width: 90px;height: 3px;background: black;transform: translate(0px,-170px) rotate(-4deg);float: right;
}
.doraemon>.head>.face>.right-beards:before{content: " ";display: block;width: 85px;height: 3px;background: black;transform: translate(0px,-40px) rotate(-20deg);
}
.doraemon>.head>.face>.right-beards:after{content: " ";display: block;width: 90px;height: 3px;background: black;transform: translate(-5px,30px) rotate(15deg);
}/*身体*/
.doraemon>.body{margin: auto;width: 220px;height: 180px;border: 2px solid black;border-color: transparent black;border-radius:10%;background: deepskyblue;transform: translate(0px,-16px);
}/*围脖*/
.doraemon>.body>.twitter{margin: auto;width: 192px;height: 16px;border: 2px solid black;border-radius:10% 10% 35% 35%;background: red;transform: translate(0px,-19px);
}/*铃铛*/
.doraemon>.body>.twitter>.bell{margin: auto;width: 50px;height: 50px;border-radius:50% ;border: 2px solid black;background:yellow;
}
.doraemon>.body>.twitter>.bell:before{content: "";display: block;margin: auto;width: 66px;height: 50px;border-radius:50% ;border: 2px solid black;border-color:black transparent transparent;background: yellowellow;transform: translate(-10px, 10px) ;}.doraemon>.body>.twitter>.bell:after{content: "";display: block;margin: auto;width: 66px;height: 50px;border-radius:50% ;border: 2px solid black;border-color:black transparent transparent;background: yellowellow;transform: translate(-10px, -50px) ;}
.doraemon>.body>.twitter>.bell>.point{margin: auto;width: 10px;height: 10px;border-radius: 50%;border: 2px solid black;background: brown;transform: translate(0px, -30px);
}
.doraemon>.body>.twitter>.bell>.point:after{content: "";display: block;margin: auto;width: 3px;height: 15px;background: black;transform: translate(0px, 10px);
}
/*口袋*/
.doraemon>.body>.pockets{margin: -39px auto;width: 180px;height: 170px;border: 2px solid black;border-radius:50% 50% 45% 45%;background: white;z-index: -1;
}
.doraemon>.body>.pockets:before{content: " ";display: block;margin: 25px auto;width: 120px;height: 120px;border:2px solid black ;border-radius: 50%;border-color:transparent  transparent black black; transform: rotate(-45deg);
}
.doraemon>.body>.pockets:after{content: " ";display: block;margin: -107px auto;width: 120px;height: 20px;border-bottom:2px solid  black;
}/*手*/
.doraemon>.body>.left_hand{width: 140px;height: 50px;border: 2px solid black;border-color: black  transparent  black transparent; border-radius:70% 40% 40% 70% ;background: deepskyblue;z-index: -1;position: relative;top: -102px;left: -76px;transform: rotate(-45deg);
}
.doraemon>.body>.left_hand:before{content: " ";display: block;width: 50px;height: 50px;border: 2px solid black;border-radius:50% ;background: white;transform: translate(-30px,0px);
}
.doraemon>.body>.right_hand{width: 140px;height: 50px;border: 2px solid black;border-color: black  transparent  black transparent; border-radius:40% 70% 70% 40% ;background: deepskyblue;z-index: -1;position: relative;top: -215px;left: 188px;transform: rotate(-30deg);
}
.doraemon>.body>.right_hand:before{content: " ";display: block;width: 50px;height: 50px;border: 2px solid black;border-radius:50% ;background: white;transform: translate(105px,0px);
}
/*脚*/
.doraemon>.foot{margin: -16px auto;width:270px;height: 50px;
/*  border: 2px solid black;*/
}
.doraemon>.foot>*{width: 120px;height: 50px;border: 2px solid black;/*border-color: transparent black black black;*/background: white;z-index: -1;/*transform: translate(0px,-40px);*/position: relative;top: -15px;
}
.doraemon>.foot>.left_foot{border-radius:50% 50% 35% 50%;transform: rotate(-2deg);float: left;
}
.doraemon>.foot>.left_foot:before{content: " ";display: block;width:100px;height: 20px;border: 2px solid black;border-radius: 50%;background: deepskyblue;transform: translate(19px,-3px);
}
.doraemon>.foot>.right_foot{border-radius:50% 50% 50% 35%;float: right;transform: rotate(2deg);
}
.doraemon>.foot>.right_foot:before{content: " ";display: block;width:100px;height: 20px;border: 2px solid black;border-radius: 50%;background: deepskyblue;transform: translate(-3px,-2px);
}
/*裤子*/
.doraemon>.foot>.pants{margin: auto;width: 45px;height: 15px;border-radius:  50%;border: 2px solid;border-color:black   black  transparent black;background: white;z-index: 1;
}

CSS画卡通人物：哆啦A梦相关推荐

  1. html画布动漫人物,canvas画布画卡通人物--哆啦A梦

    #canvas1 {background-color: #5F9EA0;} var can = document.getElementById("canvas1"); var pe ...

  2. opengl绘制卡通人物哆啦A梦

    前段时间老师布置一作业,我画了一个哆啦A梦,代码如下 #include <Windows.h> #include <gl\glut.h> #include <stdio. ...

  3. 用CSS画一只哆啦A梦

    核心方法是使用 box-shandow 阴影来进行一些操作.我们可以阴影的控制,当然,我们可以设置多个阴影,且在渐变项为 0 的时候,其实就是绘制出了单纯的色块. 效果如下: <!DOCTYPE ...

  4. CSS画卡通人物：皮卡丘

    皮卡丘 <!DOCTYPE html> <html><head><meta charset="utf-8" /><title& ...

  5. python画卡通人物_追忆童年，教你用Python画出儿时卡通人物

    作者 | 张同学 来源 | 凹凸数据 大家好,我是张同学. 又到一年一度的国际儿童节,作为逢节必过的程序猿,怎么可以放过这个学习技能的机会呢? 于是,今天我们来学习 Python 的 Turtle 库 ...

  6. python画卡通人物_用Python 绘制儿童卡通人物，一起过儿童节

    又到一年一度的国际儿童节,今天我们来学习一下用 Python 的 Turtle 库绘制童年的卡通人物,一起做回年轻的那个少年. Turtle图形库,又称海龟库,是 Python 语言中一个很流行的绘制 ...

  7. 用python画卡通人物柒_追忆童年，教你用Python画出儿时卡通人物

    大家好. 又到一年一度的国际儿童节,作为逢节必过的程序猿,怎么可以放过这个学习技能的机会呢? 于是,今天我们来学习 Python 的 Turtle 库绘制童年的卡通人物,一起做回年轻的那个少年. Tu ...

  8. python画卡通人物用什么_干啥啥不行，吹牛第一名——Python头像动漫化，快来用女朋友照片生成一个动漫头像吧...

    目录 Python头像动漫化,快来生成一个自己的动漫头像吧 一.前言 很多时候我们都会为头像发愁,像我这种万年不换头像的咸鱼从来没有这种烦恼.但是吧,有个个性化的头像还是非常有趣的,因为这个抠鼻屎的头 ...

  9. 用python画卡通人物的画法_教你绘制扁平化风格的卡通人物肖像

    今天的教程,一起来学人物肖像的绘制方法,学会了可以用作头像或者设计素材(描绘不同的职业类型),也可以直接给自己画一个,实用不难,走起练一发! 现在开始我们的教程吧. 第一步: 我们将开始我们第一个任务 ...

最新文章

  1. idea将普通目录转换为模块maven module。
  2. 回溯经典（指定位置N皇后问题）
  3. 剑指offer 矩形覆盖
  4. 计算机的各种英语名称,计算机设备名称英语词汇
  5. hihoCoder #1033 : 交错和 [ 数位dp ]
  6. afuwin64教程_华硕主板BIOS降级强刷教程
  7. Transition组件
  8. stream从list实体类筛选出符合条件的单个实体类
  9. Concis组件库封装——Collapse折叠面板
  10. 四年级计算机课的检讨,四年级下册信息技术教学反思.doc
  11. winfrom+Fleck 上传文件
  12. open3d使用知识拾遗
  13. Jquery获取选中复选框的值(checkBox)
  14. 5.Python格式化输出
  15. 微信头像跨域问题解决
  16. 四川大学网络教育计算机应用基础,四川大学网络教育学院《计算机应用基础》第一次作业...
  17. el-upload上传阿里云（oss上传）
  18. xgboost答疑解惑
  19. 深入理解transformer源码
  20. excel sheet中数据的快速复制

热门文章

  1. vr加盟项目现在怎么样？vr加盟需要多少钱？
  2. java 异步通知_Java 异步回调机制实例解析
  3. 2019年天梯赛-全国总决赛-L2-031 深入虎穴（25 分)
  4. 无法启动因为计算机丢失ac,Win7系统启动cad提示丢失ac1st16.dll的解决方法
  5. 热活化延迟荧光发光体DPA-DPS、tDPA-DPS和tDCz-DPS的定制合成
  6. 这5个姿势毁了你的健康！再不纠正就要“长残”了…
  7. 微信朋友圈/评论/点赞/搜索/购物车
  8. 微信小程序代理怎么选
  9. python量化投资培训清华大学深研院_Python量化投资远程班
  10. 包含ES6所有数组方法