利用css3绘制哆啦A梦

最新推荐文章于 2023-06-22 17:56:59 发布
最新推荐文章于 2023-06-22 17:56:59 发布
阅读量89 收藏 1
点赞数 1
文章标签： html dreamweaver css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaochen_03/article/details/130833937
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 800px;
                height: 800px;
                background-color: transparent;
                margin: 0 auto;
            }
            .box .head{
                width: 400px;
                height: 400px;
                border: 2px solid #0f90e3;
                border-radius: 50% ;
                background-color: #0f90e3;
                position: relative;
            }
            .face{
                width: 340px;
                height: 340px;
                border: 2px solid white;
                border-radius: 50%;
                background-color: white;
                position: absolute;
                top: 70px;
                left: 28px;
                position: relative;
            }
            .eye{
                border: 2px solid black;
                background-color: white;
                border-radius: 55%;
                width: 70px;
                height: 75px;
            }
            .eye-l{
                position: absolute;
                top: -31px;
                left: 95px;
                position: relative;
            }
            .eye-r{
                position: absolute;
                top: -31px;
                left: 168px;
            }
            .left-o{
                border: 2px solid gray;
                border-radius: 50%;
                width: 35px;
                height:120px;
                position: absolute;
                top: 20px;
                left: 30px;
                border-color:gray  transparent transparent transparent;
            }
            .right-o{
                width: 20px;
                height: 37px;
                border-radius: 50%;
                background-color: black;
                border: 1px solid black;
                position: absolute;
                top: 12px;
                left: 14px;
            }
            .white-1{
                width: 10px;
                height: 17px;
                border: 1px solid black;
                border-radius: 50%;
                background-color: white;
                position: absolute;
                top: 6px;
                left: 1px;
            }
            .nose{
                width: 50px;
                height: 50px;
                background-color: red;
                border: 2px solid black;
                border-radius: 50%;
                position: absolute;
                top: 15px;
                left: 140px;
            }
            .white-2{
                width: 15px;
                height: 15px;
                background-color: white;
                border: 1px solid white;
                border-radius: 50%;
                position: absolute;
                top: 10px;
                left: 10px;
            }
            .black{
                width: 117px;
                border: 1px solid black;
                background-color: black;
            }
            .black-1{
                transform: rotate(12deg);
            }
            .black-2{
                transform: rotate(0deg);
                position: absolute;
                top: 130px;
                left:-2px;
            }
            .black-3{
                transform: rotate(-11deg);
                position: absolute;
                top: 175px;
                left: -2px;
            }
            .black-4{
                transform: rotate(168deg);
                position: absolute;
                right: 2px;
                top: 79px;
            }
            .black-5{
                transform: rotate(0deg);
                position: absolute;
                right: -2px;
                top: 130px;
            }
            .black-6{
                transform: rotate(11deg);
                position: absolute;
                right: -2px;
                top: 175px;
            }
            .center{
                width: 1px;
                height: 172px;
                border: 1px solid black;
                background-color: black;
                position: absolute;
                top: 67px;
                left: 165px;
            }
            .mouth{
                position: absolute;
                top: -112px;
                left: -7px;
                width: 350px;
                height: 350px;
                border: 3px solid black;
                border-radius: 50%;
                border-color: transparent transparent black transparent; 
            }
            .red{
                width: 317px;
                height: 25px;
                border: 1px solid black;
                background-color: red;
                border-radius: 20px 20px;
                position: absolute;
                top: 340px;
                left: 41px;
            }
            .leg{
                width: 303px;
                height: 160px;
                border: 1px solid black;
                background-color: #0f90e3;
                position: absolute;
                top: 367px;
                left: 44px;
                border-color: black black white black;
            }
            .arm{
                width: 112px;
                height: 38px;
                border: 1px solid black;
                background-color: #0f90e3;
                border-color:black transparent transparent transparent;
            }
            .arm-l{
                transform: rotate(-47deg);
                position: absolute;
                bottom: -42px;
                left: -35px;
                z-index: 1;
            }
            .arm-r{
                transform: rotate(55deg);
                position: absolute;
                bottom: -42px;
                right: -30px;
                z-index: 1;
            }
            .hand{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                border: 1px solid black;
                background-color: white;
                z-index: 2;
            }
            .hand-l{
                position: absolute;
                left: -48px;
                bottom: -94px;
            }
            .hand-r{
                position: absolute;
                bottom: -94px;
                right: -31px;
            }
            .big{
                width: 240px;
                height: 120px;
                border: 1px solid black;
                background-color: white;
                border-radius: 0 0 120px 120px;
                position: absolute;
                top: 0;
                left: 34px;
            }
            .small{
                width: 150px;
                height: 75px;
                border: 1px solid black;
                border-radius: 0 0 75px 75px;
                position: absolute;
                left: 44px;
                bottom: 8px;
            }
            .yellow{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: yellow;
                border: 1px solid black;
                position: absolute;
                top: -29px;
                left: 88px;
            }
            .xxx{
                width: 44px;
                height: 5px;
                border: 1px solid black;
                border-radius: 10px 10px;
                position: absolute;
                top: 10px;
                left: 1px;
            }
            .ccc{
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: black;
                position: absolute;
                top: 20px;
                left: 18px;
            }
            .yyy{
                height: 20px;
                width: 1px;
                border: 1px solid black;
                background-color: black;
                position: absolute;
                top: 28px;
                left:24px;
            }
            .under{
                width: 40px;
                height: 20px;
                border-radius: 20px 20px 0 0 ;
                background-color: white;
                position: absolute;
                bottom: 0;
                left: 130px;
                border: 1px solid black;
                border-color: black black transparent black;
            }
            .foot{
                width: 158px;
                height: 20px;
                border: 1px solid black;
                border-radius: 15px 15px;
                background-color: white;
            }
            .foot-l{
                position: absolute;
                bottom: -150px;
                left: 30px;
            }
            .foot-r{
                position: absolute;
                bottom: -150px;
                right: 30px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="head">
                <div class="face">
                    <div class=" eye eye-l">
                        <div class="left-o"></div>
                    </div>
                    <div class="eye eye-r">
                        <div class="right-o">
                            <div class="white-1"></div>
                        </div>
                    </div>
                    <div class="nose">
                        <div class="white-2"></div>
                    </div>
                    <div class="black black-1"></div>
                    <div class="black black-2"></div>
                    <div class="black black-3"></div>
                    <div class="black black-4"></div>
                    <div class="black black-5"></div>
                    <div class="black black-6"></div>
                    <div class="center"></div>
                    <div class="mouth"></div>
                </div>
                <div class="red"></div>
                <div class="leg">
                    <div class="big">
                        <div class="small"></div>
                        <div class="yellow">
                            <div class="xxx"></div>
                            <div class="ccc"></div>
                            <div class="yyy"></div>
                        </div>
                    </div>
                    <div class="under"></div>
                </div>
                <div class=" arm arm-l"></div>
                <div class="arm arm-r"></div>
                <div class="hand hand-l"></div>
                <div class="hand hand-r"></div>
                <div class="foot foot-l"></div>
                <div class="foot foot-r"></div>
            </div>
        </div>
    </body>
</html>

xiaochen_03
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用CSS实现一个哆啦A梦
weixin_46659420的博客
07-22 830
随便画着玩的，画出来的效果如图，有点丑 HTML代码 <body> <div class="main"> <!-- 头 --> <div class="head"> <!-- 脸部 --> <div class="face"> <div class="eyes left"><div cla...
纯CSS3绘制哆啦A梦头像动画代码
09-08
纯CSS3绘制哆啦A梦头像动画代码
用css3画一个哆啦A梦
chengzihy的专栏
07-28 4858
今天偶然看到朋友用纯css3画了一个素描杯，很受启发，css3这么好玩的代码再不玩就要荒废了，于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位，其次是通过边框属性来切割棱角分明的盒子，让线条看起来流畅，还有就是通过z-index属性来控制图层，@keyframes可以让你的图片动起来，更加生动，接下来就一起复习一下这几个属性吧，然后就可以自己动手作画了。 **1.
css-哆啦A梦
qq_40836518的博客
03-04 302
最近看css的书籍，看到书上有个哆啦A梦的图片，但是没有代码，写了下，就是直线比较多优点呆板：) 效果： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>哆啦A梦</title> <style type="text/css"&g...
css——哆啦A梦
weixin_52651213的博客
05-10 1094
课堂小作业，用css画一只哆啦A梦，分为两部分，主页部分index、样式部分css 由于太菜所以书的部分直接用抠图，嘴巴部分简单的实现了一下。 话不多说上原图 代码实现部分如下： 一、index页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 导入式 --> <lin
CSS3绘制哆啦A梦头像动画代码.zip
07-11
CSS3绘制哆啦A梦头像动画代码，鼠标移动到头像区域表情有变化。
CSS3绘制哆啦A梦头像动画特效代码
03-20
CSS3绘制哆啦A梦头像动画代码，鼠标移动到头像区域表情有变化。
CSS3绘制哆啦A梦头像动画代码
05-01
CSS3绘制哆啦A梦头像动画代码，鼠标移动到头像区域表情有变化。
CSS3绘制多啦A梦机器猫图形特效代码
03-20
CSS3绘制多啦A梦机器猫图形代码，运用大量CSS3的知识点以及定位方法，眼珠会转动。代码附带详细中文注释，方便使用。
css写一个哆啦A梦
最新发布
m0_73558872的博客
06-22 287
【代码】css写一个哆啦A梦。
Android纯代码画出哆啦A梦
01-28
Android纯代码画出哆啦A梦，其中有些参数这里写死了，在不同机型上效果可能不同，但重在思想
哆啦a梦css html,用css画一个哆啦A梦
weixin_29173299的博客
07-01 375
原图：效果图：虽然说没用啥什么高级的技巧，但这让我感受到了css的乐趣！好好学习，天天向上！body{background-color: #66b3ff;height: 300px;overflow: hidden;}#head{width: 200px;height: 200px;position: absolute;left: 50%;top:31%;margin-left: -100px;m...
用一段CSS代码找回属于童年的哆啦A梦欢度六一附源码在线展示
JackieDYH的博客
06-01 1608
通过 CSS 画一个哆啦A梦，一起找回童年的回忆！ 效果图-在线演示-可右键查看完整源码 代码分解 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。 开发过程中经常只用一个属性值，例如 border-radius: 10px; 对这个属性了解的同学应该知道，这其实是一个简写，类似 padding: 10px; 他实际上会有**两个维度的半径，一个是水平维度，一个是垂直维度。*.
css哆啦A梦代码重构
qq_40836518的博客
03-04 212
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>哆啦A梦</title> <style type="text/css"> #wrapper{ width: 400px; margin: 10px auto 0...
用CSS把文字显示成哆啦A梦
薄荷醇
04-02 447
先看一下最终效果 左面是最终效果，右面是原图 先说说要实现这个效果使用的方法:background-clip 一、background-clip介绍 background-clip：按照MDN上说的，“设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面” 简单的说，就是你设置的背景图片，如何裁剪背景图片，或者说如何填满它所在的容器 看例子，现在有这么个样式 计算样式如下 它的CSS如下 p { border: 10px red; border-style: dotted d
纯CSS3实现多啦a梦—感觉萌萌哒
u012475786的专栏
12-16 974
周末起来，本来想好好复习下JS知识点。，但是正好室友讨论童年动画片的回忆，一下子让我想起了多啦A梦，万能的猫，我们的童年都想拥有一个，于是花了3个小时写了个多啦A梦。送给大家，让大家想啥有啥（呵呵...，想想就好，这个没有牛逼的功能）。希望大家喜欢。 代码如下： 多啦a梦 html,body {padding:0px;margin:0px;} .boxDom {
用纯css做出表情可动的哆啦a梦
xgshoshi的博客
07-23 597
使用css制作的可爱哆啦a梦，鼠标移动对应的部位，表情也会产生变化
多啦爱梦~多啦A梦CSS3测试源代码
weixin_30646315的博客
02-09 540
先直接看图片，感觉一下！一直以来，我们都在说浏览器对CSS3支持度这个问题。可是，鉴于知识认识水平问题，又没几个人真正了解CSS3是什么东西，和它在网站显示上的重要性。现在好了，日本某位大神写了个CSS3的代码，你只需点击进去，看一下你见到的多啦A梦是什么样就知道你的浏览器如何了。在给出代码之前，先来个缺点申明（这个很重要，是否看，自己考虑）：哆啦A梦欺骗了你！浏览器CSS3测试遭质疑http:...
纯CSS画图——哆啦A梦
cily
06-24 6815
最近突然想用前端代码画图，然后就去百度找了一张哆啦A梦的图片，用DIV+CSS画，虽然最后的结果还是有些差异，不过也就差不多可以看啦~ dlam.html 哆啦A梦
用HTML+css画一个哆啦a梦
06-08
好的，下面是一个用HTML+CSS画哆啦A梦的示例： 1. 首先，我们需要一个HTML文件，可以使用以下代码： ``` <!DOCTYPE html> 哆啦A梦 #doraemon { position: relative; width: 200px; height: 200px;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值