用CSS画一只哆啦A梦

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

效果如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>test</title><style type="text/css">/* 这里就是头部的绘制 */div {position: relative;width: 36px;height: 36px;margin: 300px auto;border-radius: 50%;background: #c63d01;box-shadow: 0 0 0 1px #000,-20px -26px 0 -10px #333,-34px -40px 0 15px #fff,-34px -40px 0 16px,20px -26px 0 -10px #333,34px -40px 0 15px #fff,34px -40px 0 16px,0 55px 0 75px #fff,0 55px 0 76px #000,0 22px 0 120px #08bdeb, 0 22px 0 121px #000;}/* 这里就是鼻子的绘制 */div::before {content: '';position: absolute;bottom: -81px;left: 17px;height: 80px;width: 2px;background: #000;}/* 这里就是嘴巴的绘制 */div::after {content: '';position: absolute;bottom: -83px;left: -42px;height: 70px;width: 120px;border-bottom: solid 2px #000;border-bottom-right-radius: 60px;border-bottom-left-radius: 60px;}</style>
</head><body><div></div>
</body></html>

用CSS画一只哆啦A梦相关推荐

纯CSS画一只简单的小鸟
用css简单画了一只小鸟,效果图如下: 代码如下: HTML: <div class="box-canvas"> <div class="body&qu ...
html画布动漫人物,canvas画布画卡通人物--哆啦A梦
#canvas1 {background-color: #5F9EA0;} var can = document.getElementById("canvas1"); var pe ...
SVG学习笔记（一）画一个哆啦A梦
用SVG画一个哆啦A梦博客原文链接概述虽然之前学过SVG,但我在工作中很少用到,正好最近赋闲在家待业中,就重新学了下SVG的东西: 基础入门教程: 链接:SVG 图像入门教程总的来说,基本语 ...
[css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
css html弄出哆啦a梦,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! body{ background-color: #66B3FF; height: 300px; ov ...
如何用python画哆啦爱梦_python3 turtle 绘制哆啦A梦
是使用pythonde turtle画的一个小猪佩奇,于是自己跟着画了一个哆啦A梦,算是只实现了头部的部分吧,如果有时间了会把代码改进. 源代码附上: import turtle as t impor ...
HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦
最近在学canvas元素,标签只是图形容器,必须使用js来绘制图形.为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来要实现的效果图要想绘画出这个哆啦a梦首先要掌握以下一些函数 ...
哆啦a梦简单图画python编程_哆啦a梦怎么画简单画法，哆啦a梦简笔画带颜色，超可爱...
有着神奇口袋的蓝胖子给我们的童年留下了深刻的记忆,哆啦A梦的口袋中总是能掏出各种神奇的道具帮助大雄解决遇到的困难,你是不是曾经也幻想有一个这样万能的朋友呢?今天我们为大家整理了一些哆啦A梦简笔画大全可 ...
python编程100例海绵宝宝-用python画哆啦a梦
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 也收到了读者想用 python 画各种图的各种需求. 和一些读者沟通后才 ...

用CSS画一只哆啦A梦

用CSS画一只哆啦A梦相关推荐

最新文章

热门文章