首页 > 其他分享 >哆啦AAA萌也能用HTML画出来？看这里！【完整代码可运行】

哆啦AAA萌也能用HTML画出来？看这里！【完整代码可运行】

时间：2024-05-27 13:29:34浏览次数：9  
标签：rotate AAA 代码 50% transform HTML radius border left

关注微信公众号「ClassmateJie」有完整代码以及更多惊喜等待你的发现。

简介/效果展示

你是否曾经想过，那些可爱的哆啦A梦角色是如何被创造出来的呢？今天，我要带你一起探索一个神奇的秘密——用HTML画出哆啦A梦！

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{background:#feec7b;}
        .pokonyan{width:572px; height:397px; margin:0 auto; position: absolute; left:50%; top:50%; margin-left:-286px; margin-top:-198px;}
        .header{width:340px; height:318px; position:absolute; right:12px; top:0; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:48%; background:#00a0e9; border:#000 solid 2px; z-index: 6;}
        .header .face{width: 305px; height:235px;  position: absolute; right: -8px; bottom: 0px; background:#fff; border:#000 solid 2px; border-top-left-radius:40%; border-top-right-radius:40%; border-bottom-left-radius:50%; border-bottom-right-radius:50%;  -webkit-transform:rotate(-25deg); -moz-transform:rotate(-25deg); transform:rotate(-25deg);}
        .header .eye{width:75px; right:182px; height:97px; position: absolute; border:#000 solid 2px; border-radius: 50%; background:#fff; top:34px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg);}
        .header .eyeBlack{width:18px; height:36px; position:absolute; right:7px; bottom:23px; overflow:hidden; background:#000; border-radius: 50%;}
        .header .eyeWhite{width:8px; height:12px; position:absolute; right:3px; bottom:13px; overflow:hidden; background:#fff;  border-radius: 50%; }
        .header .eyer{right:110px; top:2px; -webkit-transform:rotate(-28deg); -moz-transform:rotate(-28deg); transform:rotate(-28deg);}
        .header .eyer .eyeBlack{left:14px;  bottom:28px;}
        .header .noseLine{width:20px; height:160px; border-right:#000 solid 2px; border-radius:50%; position:absolute; right:120px; top:100px;  -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg);}
        .header .quilt{width:100px; height:60px; background:#fff; border-radius:50%;  position:absolute; top:220px; right:60px;}
        .header .nose{width: 44px; height:44px; position: absolute; top:84px; right:132px; background:#e0002a; border-radius:50%; border: 2px solid #000; }
        .header .nose .white{width:13px; height:13px; position: absolute; top:14px; left:10px; background:#fff; border-radius:50%; }
        .header .mouthBox{width:290px; height:82px; position:absolute; bottom:84px; right: 0px;  overflow:hidden;  -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg);}
        .header .mouthBox .mouth{width: 290px; height:200px; border-radius:50%; position:absolute; bottom:0; right:0; border:#000 solid 2px; }
        .header .beard{width:107px; height:3px; background:#000; position:absolute; border-radius:50%; overflow: hidden;}
        .header .beard1{top:170px; left:60px; -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-10deg);}
        .header .beard2{top:200px; left:62px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg);}
        .header .beard3{top:230px; left:68px; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); transform:rotate(-30deg);}
        .header .beard4{top:120px; right:-10px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-30deg);}
        .header .beard5{top:150px; right:-20px; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); transform:rotate(-20deg);}
        .header .beard6{top:180px; right:-30px; -webkit-transform:rotate(-40deg); -moz-transform:rotate(-40deg); transform:rotate(-10deg);}
        /*脖子*/
        .neckBox{width:302px; height:318px; position:absolute;  background:#e0002a; border:#000 solid 2px; z-index: 4; right:41px; top:18px;  overflow:hidden; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:48%;}
        .neckBox .necka{width:340px; height:318px; position:absolute;  background:#e0002a; z-index: 4; right:5px; bottom:-3px; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:48%;}
        /*铃铛*/
        .bell{width:56px; height:56px; background:#ffe43b; border:#000 solid 2px; border-radius:50%; position: absolute; bottom:27px; right:110px; z-index: 5; overflow:hidden;}
        .bell .line{width:56px; height:50px; border-right:#000 solid 2px; position:absolute; top:20px; left:-24px; border-radius: 50%;}
        .bell .linebg{width:86px; height:56px; background:#ffe43b;  position:absolute; bottom:18px; left:-30px; border-radius: 50%;}
        .bell .center{width:15px; height:7px; border-radius:50%; background:#7d6b56; border:#000 solid 2px; position: absolute; top:33px; left:22px; -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-10deg);}
        .bell .top{width:86px; height:56px; background:#ffe43b; border:#000 solid 2px; position:absolute; bottom:28px; left:-30px; border-radius: 50%;}
        .bell .top2{width:86px; height:56px; background:#ffe43b; border:#000 solid 2px; position:absolute; bottom:35px; left:-30px; border-radius: 50%;}
        /*屁股*/
        .arse{width:186px; height:186px; position: absolute; top:160px; left:106px; border-radius:50%; background:#00a0e9; border-top:#000 solid 2px;  border-left:#000 solid 2px; border-bottom:#00a0e9 solid 2px; -webkit-transform:rotate(40deg); -moz-transform:rotate(40deg); transform:rotate(40deg);  z-index: 3;}
        /*肚子*/
        .tummy{width:240px; height:186px; position: absolute; bottom:33px; left:146px; border-radius:50%; background:#00a0e9; border-bottom:#000 solid 2px;  border-right:#000 solid 2px; border-left:#00a0e9 solid 2px; z-index: 3;}
        @-webkit-keyframes tail {
            0%{
                margin-left:0;
            }
            25%{
                margin-left:-10px;
            }
            50%{
                margin-left:-20px;
            }
            75%{
                margin-left:10px;
            }
            100%{
                margin-left:20px;
            }
        }
        .tail{width:58px; height:58px; position: absolute; bottom:216px; left:92px; z-index: 2; }
        .tail .circle{width:50px; height:50px; background:#e0002a; border:#000 solid 2px;  border-radius:50%;}
        .tail .lineBox{width:18px; height:18px; position: absolute; bottom:0; right:4px; overflow:hidden;}
        .tail .lineBox .line{width:50px; height:50px; border:#000 solid 2px; position:absolute; bottom:-30px; left:-36px; border-radius:50%;}
        /*腿*/
        .leg{width:120px; height:120px; position: absolute; bottom:37px; left:82px; border-radius:50%; background:#00a0e9;  border:#000 solid 2px; z-index: 2;}
        .legbottomBox{width:169px; height:120px; background:#333333; overflow:hidden; position: absolute; bottom:30px; left:90px; border-radius:40%; z-index: 3;}
        .legbottomBox .legbottom{width:240px; height:120px; position:relative; bottom:4px; left:-40px; border-radius:50%; background:#00a0e9;  border:#000 solid 2px;   border-bottom:#000 solid 2px;  -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg);}
        /*脚*/
        .foot{width:120px; height:100px; position: absolute; bottom:38px; left:22px; border-radius:50%; background:#fff; border:#000 solid 2px;  -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-20deg);   z-index: 1;}
        .foottop{width:97px; height:100px; position: absolute; bottom:20px; left:-16px; border-bottom-left-radius:50%;  border-top-left-radius:50%; background:#fff; border:#000 solid 2px; border-right:none;  -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-20deg);   z-index: 1;}
        .handr{width:130px; height:90px; position: absolute; bottom:46px; right:0px; border-radius:50%; background:#00a0e9; border:#000 solid 2px; z-index: 3;}
        .handr .palm{width: 78px; height:60px; position: absolute; top:-30px; right:-10px; border-radius:50%; background:#fff; border:#000 solid 2px; z-index: 3; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg);}
        .handr .line{width: 80px; height:80px; position: absolute; border-left:#000 solid 2px; border-bottom:transparent solid 2px; top:8px; right:-6px; border-radius: 50%; -webkit-transform:rotate(50deg); -moz-transform:rotate(50deg); transform:rotate(50deg);}
        .handtop{width:74px; height:40px; background:#00a0e9; border-top:#000 solid 2px; border-left:#00a0e9 solid 2px; position: absolute; bottom:58px; right:240px;  -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); transform:rotate(20deg); z-index:5;}
        .handlBox{width:180px; height:70px; position: absolute; bottom:6px; right:152px; overflow: hidden; z-index:5;}
        .handlBox .handl{width:260px; height:110px; border:#000 solid 2px;  background:#00a0e9; border-left:transparent solid 2px; position:absolute; bottom:26px; right:-3px; border-radius: 50%; -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); transform:rotate(30deg);}
        .handlBox .handl .line{width:40px; height:80px; position: absolute; background:none; border-left:#000 solid 2px; top:0px; right:48px;}
        .palml{width:86px; height:70px; position: absolute; bottom:32px; right:168px; border-radius:50%; background:#fff; border:#000 solid 2px; z-index: 3; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); transform:rotate(20deg); z-index: 7;}
</style>
</head>
<body>
<div class="pokonyan">
    
    <div class="header">
        
        <div class="face"></div>
        
        <div class="eye eyel">
            <div class="eyeBlack">
                <div class="eyeWhite"></div>
            </div>
        </div>
        <div class="eye eyer">
            <div class="eyeBlack">
                <div class="eyeWhite"></div>
            </div>
        </div>
        
        <div class="noseLine"></div>
        <div class="quilt"></div>
        
        <div class="nose">
            <div class="white"></div>
        </div>
        
        <div class="mouthBox">
            <div class="mouth"></div>
        </div>
        
        <div class="beard beard1"></div>
        <div class="beard beard2"></div>
        <div class="beard beard3"></div>
        <div class="beard beard4"></div>
        <div class="beard beard5"></div>
        <div class="beard beard6"></div>
    </div>
    
    <div class="neckBox">
        <div class="neck"></div>
    </div>
    
    <div class="bell">
        <div class="line"></div>
        <div class="linebg"></div>
        <div class="center"></div>
        <div class="top"></div>
        <div class="top2"></div>
    </div>
    
    <div class="arse">
        <div class="neck"></div>
    </div>
    
    <div class="tummy"></div>
    
    <div class="tail">
        <div class="circle"></div>
        <div class="lineBox" >
            <div class="line"></div>
        </div>
    </div>
    
    <div class="leg"></div>
    <div class="legbottomBox">
        <div class="legbottom"></div>
    </div>
    
    <div class="foot"></div>
    
    
    <div class="handr">
        <div class="line"></div>
        <div class="palm"></div>
    </div>
    
    <div class="handtop"></div>
    <div class="handlBox">
        <div class="handl">
            <div class="line"></div>
        </div>
    </div>
    <div class="palml"></div>
</div>
</body>
</html>

代码分析

这段代码使用HTML和CSS绘制了一个哆啦A梦的图像。

  • HTML部分建立了一个名为"pokonyan"的div元素，这个div内包含了哆啦A梦的各个部分，比如头部（header）、脖子（neckBox）、铃铛（bell）、屁股（arse）、肚子（tummy）、尾巴（tail）、腿（leg）和手（handr、handlBox）等部分。每个部分都是一个div元素，这些元素的样式在CSS中定义。

  • CSS部分定义了每个div元素的样式，包括宽度、高度、位置、背景颜色、边框等，以此来形成哆啦A梦的形象。例如，“.header"类定义了哆啦A梦的头部的样式，包括宽度、高度、位置、背景颜色等，”.face"类定义了脸的样式，“.eye"类定义了眼睛的样式，”.nose"类定义了鼻子的样式。

  • 此外，还有一些类用于创建哆啦A梦的细节部分，如眼球（eyeBlack、eyeWhite）、胡须（beard1-beard6）、铃铛的细节（line、linebg、center、top、top2）等。最后，通过改变每个元素的位置和大小，以及旋转角度（使用transform:rotate），将这些元素组合在一起，形成了一个哆啦A梦的图像。

在这里插入图片描述

关注微信公众号「 ClassmateJie」
更多惊喜等待你的发掘

标签：rotate,AAA,代码,50%,transform,HTML,radius,border,left
From： https://blog.csdn.net/J_Jie_/article/details/139235671

相关文章

  • javaEE—图书管理系统（基础代码版）
                           前言：本篇博客是集合了javaEE所学的知识构建的一个基础框架，讲述着面向对象的过程是如何做到多对象交互协作完成框架的构建的。利用了数组，接口，类和对象，抽象类，Object类等知识来完成。后续会加入数据库，网页......
  • 水资源管理新视角：AquaCrop模型分析与代码解读
    AquaCrop是由世界粮食及农业组织（FAO）开发的一个先进模型，旨在研究和优化农作物的水分生产效率。这个模型在全球范围内被广泛应用于农业水管理，特别是在制定农作物灌溉计划和应对水资源限制方面显示出其强大的实用性。AquaCrop不仅包含一个全面的数据库，还提供了用户友好的接口，使得它......
  • 57天【代码随想录算法训练营34期】第十章 单调栈part01
    739.每日温度单调栈指的是只增加或只减少的stack，相当于一个memoclassSolution:defdailyTemperatures(self,temperatures:List[int])->List[int]:answer=[0]*len(temperatures)stack=[0]foriinrange(1,len(temperatures)):......
  • net基于ASP. NET及HTML的高校官网设计论文
    目录第一章绪论11.1背景及意义11.2国内外研究概况21.3研究的内容2第二章关键技术的研究32.1net语言32.2MVC框架32.3VUE框架42.4Tomcat介绍42.5sqlserver数据库5第三章系统分析53.1系统设计目标63.2系统可行性分析63.3系统功能分析......
  • 关于泊松流生成模型（PFGM++）官方GitHub代码的一知半解
    论文：PFGM++:UnlockingthePotentialofPhysics-InspiredGenerativeModelsCodeisavailableathttps://github.com/Newbeeer/pfgmpp问题，学习官方代码后，生成数据会有以下报错解决方案：将generate.py中的调整为调整后即可正常运行，并生成图片相关参考Python*args和......
  • 代码随想录算法训练营第十八天 | 513.找树左下角的值
    513.找树左下角的值题目链接文章讲解视频讲解classSolution{public:intmaxDepth=INT_MIN;intresult;intfindBottomLeftValue(TreeNode*root){intdepth=0;traversal(root,depth);returnresult;}voi......
  • 了解 HTML 中的window、document、body和元素的尺寸及位置
    本文将详细介绍与窗口（window）、文档（document）、主体（body）以及其他HTML元素的尺寸和位置相关的属性及方法。每个部分将包含示例和代码注释，帮助您更好地理解和应用这些知识。window对象尺寸属性1.window.innerWidth和window.innerHeightwindow.innerWidth和window.inn......
  • html解决浏览器记住密码输入框的问题
    浏览器通常会记住用户在表单中输入的信息，包括密码字段。这是通过表单的autocomplete属性来控制的。如果你希望浏览器不要记住密码字段的输入，可以设置autocomplete属性为off或new-password。以下是一个HTML表单示例，展示如何禁止浏览器记住密码字段： <!DOCTYPEhtml><htmllang......
  • git clone 远程代码执行漏洞(CVE-2024-32002) 升级
    接到提醒说git有个漏洞,Gitclone远程代码执行漏洞(CVE-2024-32002)看了看,说是git的Symlinks模块存在高危漏洞，攻击者可以利用该漏洞执行任意代码，导致服务器失陷。以下这些版本都有影响0<git<2.39.42.40.0≤git<2.40.22.41.0≤git<2.41.12.42.0≤git<2.42.......
  • 记住这三个神仙代码，时刻为你的电脑保驾护航
    在这个数字化飞速发展的时代，我们的电脑不仅存储着重要的个人信息，还承载着繁重的工作任务。如何确保电脑的安全与稳定运行，成为了一个至关重要的问题。今天小编给大家分享这三个神仙代码，记好了这三个代码，时刻为你的电脑保驾护航。代码1：dxdiag按住win+R键，打开运行框，输入dxdiag......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99