用css画一个哆啦A梦

最新推荐文章于 2024-05-27 13:26:13 发布
最新推荐文章于 2024-05-27 13:26:13 发布
阅读量395 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css画哆啦A梦
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44388435/article/details/89362528
版权

屏幕分辨率不同可能会导致某些div的位置不对，用浏览器调试下就好了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body{
            background-color: #66B3FF;
            height: 300px;
            overflow: hidden;
        }
        #head{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top:31%;
            margin-left: -100px;
            margin-top: -100px;
            background-color: #0080FF;
            border-radius: 999px;
            border: 1px solid black;
        }
        #face{
            width: 179px;
            height: 150px;
            position: absolute;
            left: 43.4%;
            top:22%;

            background-color: white;
            border-radius: 999px;
            border: 1px solid black;
        }
        #leftEye{
            width: 50px;
            height: 60px;
            position: absolute;
            left:46.2%;
            top:18%;

            background-color: white;
            border-radius: 50%;
            border: 1px solid black;
        }
        #rightEye{
            width: 50px;
            height: 60px;
            position: absolute;
            left:50%;
            top:18%;

            background-color: white;
            border-radius: 50%;
            border: 1px solid black;
        }
        #leftEye1{
            width: 13px;
            height: 20px;
            position: absolute;
            left:48.5%;
            top:22.2%;

            background-color: black;
            border-radius: 50%;
            border: 1px solid black;
        }
        #rightEye1{
            width: 13px;
            height: 20px;
            position: absolute;
            left:50.5%;
            top:22.2%;
            background-color: black;
            border-radius: 50%;
            border: 1px solid black;
        }
        #leftEye2{
            width: 5px;
            height: 8px;
            position: absolute;
            left:48.9%;
            top:23%;

            background-color: white;
            border-radius: 50%;
            border: 1px solid black;
        }
        #rightEye2{
            width: 5px;
            height: 8px;
            position: absolute;
            left:50.7%;
            top:23%;

            background-color: white;
            border-radius: 50%;
            border: 1px solid black;
        }
        #nose{
            width: 25px;
            height: 25px;
            position: absolute;
            left:49%;
            top:25.5%;

            background-color: red;
            border-radius: 50%;
            border: 1px solid black;
        }
        #nose1{
            width: 6px;
            height: 6px;
            position: absolute;
            left:49.5%;
            top:26.5%;

            background-color: white;
            border-radius: 50%;

        }
        #line{
            width: 1px;
            height: 100px;
            position: absolute;
            left:49.9%;
            top:29.7%;
            background-color: white;
            border-left: 2px solid #000000;
            margin-left: 1px;
        }
        #line1{
            width: 60px;
            height: 1px;
            position: absolute;
            left:43.5%;
            top:28%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            transform:rotate(12deg);
        }
        #line2{
            width: 60px;
            height: 1px;
            position: absolute;
            left:43.5%;
            top:32%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;

        }
        #line3{
            width: 60px;
            height: 1px;
            position: absolute;
            left:43.5%;
            top:36%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            transform:rotate(-12deg);
        }
        #line4{
            width: 60px;
            height: 1px;
            position: absolute;
            left:51.6%;
            top:28%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            transform:rotate(-12deg);
        }
        #line5{
            width: 60px;
            height: 1px;
            position: absolute;
            left:51.6%;
            top:32%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;

        }
        #line6{
            width: 60px;
            height: 1px;
            position: absolute;
            left:51.6%;
            top:36%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            transform:rotate(12deg);
        }

        #mouse{

            width: 130px;
            height: 130px;
            position: absolute;
            left: 45.1%;
            top:30%;
            margin-left: -0.5px;
            background-color: white;
            border-radius: 0 0 65px 65px;
            border-bottom: 2px solid black;
            height: 65px;
        }
        #food{
            width: 80px;
            height: 62px;
            position: absolute;
            left:46.9%;
            top:39.2%;

            background-color:#FFAF60;
            border-radius: 50%;
            border: 1px solid black;
        }
        #food1{
            width: 78px;
            height: 57px;
            position: absolute;
            left:47%;
            top:38.9%;

            background-color: #FFAF60;
            border-radius: 50%;
            border: 1px solid black;
        }
        #food2{
            width: 73px;
            height: 52px;
            position: absolute;
            left:47.2%;
            top:39.1%;

            background-color:#844200;
            border-radius: 50%;

        }
        #leftFist{
            width: 50px;
            height: 50px;
            position: absolute;
            left:45%;
            top:40%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: white;
            border-radius: 999px;
            border: 1px solid black;
        }
        #rightFist{
            width: 50px;
            height: 50px;
            position: absolute;
            left:53%;
            top:40%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: white;
            border-radius: 999px;
            border: 1px solid black;
        }
        #leftHand{
            width: 50px;
            height: 70px;
            position: absolute;
            left:43.3%;
            top:44%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: #0080FF;
            border-radius: 50%;
            transform:rotate(34deg);
            border: 1px solid black;
        }
        #rightHand{
            width: 50px;
            height: 70px;
            position: absolute;
            left:54.3%;
            top:44%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: #0080FF;
            border-radius: 50%;
            transform:rotate(-34deg);
            border: 1px solid black;
        }
        #tummy{
            width: 110px;
            height: 110px;
            position: absolute;
            left: 53.1%;
            top:58.5%;
            margin-left: -100px;
            margin-top: -100px;
            background-color: white;
            border-radius: 999px;
            border: 1px solid black;
        }
        #bodyy{
            width: 135px;
            height: 115px;
            position: absolute;
            left: 44.7%;
            top:45%;
            background-color: #0080FF;
        }
        #cover{
            width: 400px;
            height: 400px;
            position: absolute;
            left: 35.3%;
            top:62.3%;
            background-color:#66B3FF;
            border-radius: 50%;
        }
        #leftLeg{
            width: 80px;
            height: 90px;
            position: absolute;
            left:42%;
            top:53.5%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: white;
            border-radius: 50%;
            border: 1px solid black;
        }
        #rightLeg{
            width: 80px;
            height: 90px;
            position: absolute;
            left:53.7%;
            top:53.5%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: white;
            border-radius: 50%;
            border: 1px solid black;
        }
        #pocket{
            width: 88px;
            height: 82px;
            position: absolute;
            left: 46.5%;
            top:51.6%;
            margin-left: -0.5px;
            background-color: white;
            border-radius: 0 0 41px 41px;
            border: 1px solid black;
            height: 41px;

        }
    </style>
</head>
<body>
<div id="head"></div>
<div id="face"></div>
<div id="leftEye"></div>
<div id="rightEye"></div>
<div id="leftEye1"></div>
<div id="rightEye1"></div>
<div id="leftEye2"></div>
<div id="rightEye2"></div>
<div id="nose"></div>
<div id="nose1"></div>
<div id="bodyy"></div>
<div id="tummy"></div>
<div id="mouse"></div>
<div id="line"></div>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="line5"></div>
<div id="line6"></div>
<div id="food"></div>
<div id="food1"></div>
<div id="food2"></div>

<div id="leftHand"></div>
<div id="rightHand"></div>


<div id="cover"></div>
<div id="leftFist"></div>
<div id="rightFist"></div>
<div id="leftLeg"></div>
<div id="rightLeg"></div>
<div id="pocket"></div>
</body>
</html>
小博客
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
哆啦A梦 css
04-30
作者为：zhiyuchangxin 1.绘制半圆使用的方法是先绘两个椭圆，然后将其进行叠加实现（初步）。 2.后来只使用 border-radius 设置不同个数的参数直接实现。 3.但是在 less 编译的过程中，css3 中的 calc 却被当成计算了。困惑了好久，原来 less 的计算方式跟 calc 方法有重叠，两者发生冲突。
利用CSS绘制哆啦A梦
u011435776的博客
07-19 625
最近在复习CSS，刚好看到box-shadow属性，这个属性还是蛮强大的，可以绘制一些奇奇怪怪的东西，所以就参考资料简单的绘制了一个哆啦A梦，效果如下： Doraemon 代码链接：Doraemon.html  ...
哆啦AAA萌也能用HTML画出来？看这里！【完整代码可运行】
最新发布
J_Jie_的博客
05-27 536
关注微信公众号「ClassmateJie」有完整代码以及更多惊喜等待你的发现。 简介/效果展示 你是否曾经想过，那些可爱的哆啦A梦角色是如何被创造出来的呢？今天，我要带你一起探索一个神奇的秘密——用HTML画出哆啦A梦！ 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
CSS画哆啦A梦
xuxianshe的博客
03-22 451
CSS画哆啦A梦
纯CSS&Canvas画哆啦A梦
Creabine的博客
07-05 2823
前段时间看到有人呢用纯CSS画大白，当时觉得很神奇。最近有空了解了一下，其实就是简单的div加上border-radius，transform，把div变成所需的各种形状再定位拼接，其实没有什么高深的技术。但是还是试着做了个小demo，大家都画大白，我就画个别的，最后选了哆啦A梦。最后的结论是，这种方式可以画一些简单的图，但是基本上没什么意义，也就是闲的蛋疼作为练习，熟悉一下定位和css属性。刚好前
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
总的来说，这个“CSS3+HTML5画哆啦A梦”的项目不仅展示了HTML5和CSS3的强大功能，也体现了开发者创新和趣味性的结合。通过这样的实践，我们可以更好地理解和掌握这些技术，同时也能激发更多关于网页设计的灵感。无论...
CSS画出一个可爱神奇的多啦A梦
09-27
在本篇文章中，我们将学习如何使用CSS来创建一个简单可爱的多啦A梦形象。 多啦A梦，又名机器猫，是一部深受各个年龄层次欢迎的日本漫画中的角色，以其蓝色的圆形身体、红色的圆顶帽、白色的脸颊和圆滚滚的大眼睛而...
纯CSS3绘制哆啦A梦头像动画代码
09-08
在本项目中，我们将探讨如何使用纯CSS3技术来创建一个动态的哆啦A梦头像。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和功能，使网页设计更为丰富和交互性更强。在"纯CSS3绘制哆...
CSS3绘制哆啦A梦头像动画代码.zip
07-11
4. **过渡（Transition）**：CSS3的过渡效果可以平滑地改变一个或多个CSS属性，使得哆啦A梦头像在鼠标悬停时的表情变化看起来更加自然流畅。 5. **动画（Animation）**：CSS3的动画允许我们定义一组关键帧，通过...
纯css3绘图哆啦a梦机器猫头像特效
11-24
在本案例中，我们将探讨如何使用纯CSS3绘制哆啦A梦机器猫的头像特效。 首先，让我们理解CSS3绘图的基本概念。CSS3引入了若干新的绘图工具，如边框半径、渐变、阴影、多列布局以及变换、过渡和动画等。这些特性为...
css构造多啦A梦
06-05
使用单纯的css标记，来构造一个多啦A梦。这是别人分享的，上传希望和更多的人分享。
css——哆啦A梦
weixin_52651213的博客
05-10 1133
课堂小作业，用css画一只哆啦A梦，分为两部分，主页部分index、样式部分css 由于太菜所以书的部分直接用抠图，嘴巴部分简单的实现了一下。 话不多说上原图 代码实现部分如下： 一、index页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 导入式 --> <lin
css制作哆啦a梦
ssh6666的博客
03-19 606
css制作哆啦a梦 <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .doraemon{ position: r...
纯CSS画哆啦A梦
lynn_rose的博客
02-23 840
如何用纯CSS画出一个哆啦A梦？ &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &a
用纯css做出表情可动的哆啦a梦
xgshoshi的博客
07-23 633
使用css制作的可爱哆啦a梦，鼠标移动对应的部位，表情也会产生变化
CSS画卡通人物：哆啦A梦
qq_44645934的博客
04-12 1662
哆啦A梦 HTML代码块 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>哆啦A梦</title> <link rel="stylesheet" type="text/css" href="css/doraemon.css...
用CSS把文字显示成哆啦A梦
薄荷醇
04-02 449
先看一下最终效果 左面是最终效果，右面是原图 先说说要实现这个效果使用的方法:background-clip 一、background-clip介绍 background-clip：按照MDN上说的，“设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面” 简单的说，就是你设置的背景图片，如何裁剪背景图片，或者说如何填满它所在的容器 看例子，现在有这么个样式 计算样式如下 它的CSS如下 p { border: 10px red; border-style: dotted d
用css3画一个哆啦A梦
chengzihy的专栏
07-28 4898
今天偶然看到朋友用纯css3画了一个素描杯，很受启发，css3这么好玩的代码再不玩就要荒废了，于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位，其次是通过边框属性来切割棱角分明的盒子，让线条看起来流畅，还有就是通过z-index属性来控制图层，@keyframes可以让你的图片动起来，更加生动，接下来就一起复习一下这几个属性吧，然后就可以自己动手作画了。 **1.
用HTML+css画一个哆啦a梦
06-08
好的，下面是一个用HTML+CSS画哆啦A梦的示例： 1. 首先，我们需要一个HTML文件，可以使用以下代码： ``` <!DOCTYPE html> <html> <head> <title>哆啦A梦</title> <style> #doraemon { position: relative; width: 200px; height: 200px; background-color: #4d4d4d; border-radius: 100px; overflow: hidden; } #doraemon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 100px; transform: translate(30px, 30px); } #doraemon .face { position: absolute; top: 30px; left: 30px; width: 140px; height: 140px; background-color: #fff; border-radius: 70px; overflow: hidden; } #doraemon .face:before { content: ""; position: absolute; top: 5px; left: 5px; width: 130px; height: 130px; background-color: #4d4d4d; border-radius: 65px; } #doraemon .face:after { content: ""; position: absolute; top: 50px; left: 50px; width: 40px; height: 40px; background-color: #fff; border-radius: 20px; } #doraemon .eyes { position: absolute; top: 50px; left: 70px; width: 60px; height: 45px; background-color: #000; border-radius: 30px; overflow: hidden; } #doraemon .eyes:before { content: ""; position: absolute; top: 5px; left: 5px; width: 50px; height: 35px; background-color: #fff; border-radius: 25px; } #doraemon .eyes:after { content: ""; position: absolute; top: 15px; left: 15px; width: 20px; height: 15px; background-color: #000; border-radius: 10px; } #doraemon .mouth { position: absolute; top: 110px; left: 40px; width: 120px; height: 50px; border-radius: 25px; border-top: 2px solid #000; background-color: #fff; transform: rotate(-20deg); } #doraemon .mouth:before { content: ""; position: absolute; top: 5px; left: 5px; width: 110px; height: 40px; background-color: #4d4d4d; border-radius: 20px; transform: rotate(20deg); } #doraemon .whiskers { position: absolute; top: 75px; left: 50px; width: 100px; height: 1px; background-color: #000; transform: rotate(10deg); } #doraemon .whiskers:before { content: ""; position: absolute; top: -5px; left: 0; width: 5px; height: 10px; background-color: #000; transform: rotate(-20deg); } #doraemon .whiskers:after { content: ""; position: absolute; top: 5px; left: 0; width: 5px; height: 10px; background-color: #000; transform: rotate(-20deg); } #doraemon .whiskers:nth-child(2) { transform: rotate(-10deg); } #doraemon .whiskers:nth-child(2):before { transform: rotate(20deg); } #doraemon .whiskers:nth-child(2):after { transform: rotate(20deg); } #doraemon .whiskers:nth-child(3) { transform: rotate(10deg); } #doraemon .whiskers:nth-child(3):before { transform: rotate(-20deg); } #doraemon .whiskers:nth-child(3):after { transform: rotate(-20deg); } </style> </head> <body> <div id="doraemon"> <div class="face"></div> <div class="eyes"></div> <div class="mouth"></div> <div class="whiskers"></div> <div class="whiskers"></div> <div class="whiskers"></div> </div> </body> </html> ``` 2. 接下来，我们来解释一下上面的代码： - 通过`position: relative`设置`#doraemon`为相对定位，以便于后面的绝对定位。 - 设置`width`和`height`为200px，使得`#doraemon`呈现为一个圆形。 - 设置`background-color`为#4d4d4d，使得`#doraemon`呈现为蓝色。 - 通过`border-radius: 100px`将`#doraemon`设置为圆形。 - 通过`overflow: hidden`将`#doraemon`内部的元素裁剪为圆形。 3. 接下来，我们需要用伪元素`::before`来实现哆啦A梦的脸部分： - 通过`content: ""`设置伪元素的内容为空。 - 通过`position: absolute`将伪元素绝对定位在`#doraemon`内部。 - 通过`top`和`left`属性将伪元素相对于`#doraemon`进行定位。 - 通过`width`和`height`设置伪元素的大小。 - 通过`background-color`设置伪元素的颜色。 - 通过`border-radius`将伪元素设置为圆形。 - 通过`transform: translate(30px, 30px)`将伪元素向右下方平移，实现哆啦A梦的脸颊。 4. 接下来，我们需要用`div`元素来实现哆啦A梦的眼睛： - 通过`position: absolute`将眼睛绝对定位在脸部内部。 - 通过`top`和`left`属性将眼睛相对于脸部进行定位。 - 通过`width`和`height`设置眼睛的大小。 - 通过`background-color`设置眼睛的颜色。 - 通过`border-radius`将眼睛设置为半圆形。 - 通过`overflow: hidden`将眼睛内部的元素裁剪为半圆形。 5. 接下来，我们需要用伪元素`::before`来实现哆啦A梦的眼珠： - 通过`content: ""`设置伪元素的内容为空。 - 通过`position: absolute`将伪元素绝对定位在眼睛内部。 - 通过`top`和`left`属性将伪元素相对于眼睛进行定位。 - 通过`width`和`height`设置伪元素的大小。 - 通过`background-color`设置伪元素的颜色。 - 通过`border-radius`将伪元素设置为圆形。 6. 接下来，我们需要用`div`元素来实现哆啦A梦的嘴巴： - 通过`position: absolute`将嘴巴绝对定位在脸部内部。 - 通过`top`和`left`属性将嘴巴相对于脸部进行定位。 - 通过`width`和`height`设置嘴巴的大小。 - 通过`border-radius`将嘴巴设置为半圆形。 - 通过`border-top`设置嘴巴的上边框。 - 通过`background-color`设置嘴巴的颜色。 - 通过`transform: rotate(-20deg)`将嘴巴旋转20度，使得它看起来更加生动。 7. 最后，我们需要用`div`元素和伪元素来实现哆啦A梦的小胡须： - 通过`position: absolute`将小胡须绝对定位在脸部内部。 - 通过`top`和`left`属性将小胡须相对于脸部进行定位。 - 通过`width`和`height`设置小胡须的大小。 - 通过`background-color`设置小胡须的颜色。 - 通过`transform: rotate(10deg)`将小胡须旋转10度，使得它看起来更加生动。 - 通过伪元素来实现小胡须的两端。 到这里，一个用HTML+CSS画的哆啦A梦就完成了。希望这个示例对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值