用css画一个哆啦A梦

于 2019-04-16 23:10:00 发布
阅读量94 收藏
点赞数
原文链接：http://www.cnblogs.com/huangminjian/p/10720800.html
版权

原图：

 

效果图：

虽然说没用啥什么高级的技巧，但这让我感受到了CSS的乐趣！

好好学习，天天向上！

<!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>

 

转载于:https://www.cnblogs.com/huangminjian/p/10720800.html

dingcou9243
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
总的来说，这个“CSS3+HTML5画哆啦A梦”的项目不仅展示了HTML5和CSS3的强大功能，也体现了开发者创新和趣味性的结合。通过这样的实践，我们可以更好地理解和掌握这些技术，同时也能激发更多关于网页设计的灵感。无论...
用css3画一个哆啦A梦
chengzihy的专栏
07-28 4883
今天偶然看到朋友用纯css3画了一个素描杯，很受启发，css3这么好玩的代码再不玩就要荒废了，于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位，其次是通过边框属性来切割棱角分明的盒子，让线条看起来流畅，还有就是通过z-index属性来控制图层，@keyframes可以让你的图片动起来，更加生动，接下来就一起复习一下这几个属性吧，然后就可以自己动手作画了。 **1.
CSS画出一个可爱神奇的多啦A梦
09-27
想不想拥有可爱的多啦A梦，这篇文章主要教大家使用CSS画出一个可爱神奇的多啦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引入了若干新的绘图工具，如边框半径、渐变、阴影、多列布局以及变换、过渡和动画等。这些特性为...
性能~问题业务场景稳定性测试
07-25
1
《AI大模型应用》--百度AI 文心一言.zip
07-25
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
b112日常办公用品直售推荐系统-springboot+vue.zip（可运行源码+sql文件+）
07-25
日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
Android个性化书架应用构建.rar
07-25
Android个性化书架应用构建
b120房屋租赁管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
房屋租赁管理系统管理系统按照操作主体分为管理员和用户。管理员的功能包括报修管理、字典管理、租房房源管理、租房评价管理、房源租赁管理、租房预约管理、论坛管理、公告管理、投诉建议管理、用户管理、租房合同管理、管理员管理。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。 房屋租赁管理系统管理系统可以提高房屋租赁管理系统信息管理问题的解决效率，优化房屋租赁管理系统信息处理流程，保证房屋租赁管理系统信息数据的安全，它是一个非常可靠，非常安全的应用程序。 管理员权限操作的功能包括管理公告，管理房屋租赁管理系统信息，包括房源管理，报修管理，报修管理，公告管理等，可以管理投诉建议。 房源管理界面，管理员在房源管理界面中可以对界面中显示，可以对房源信息的房源状态进行查看，可以添加新的房源信息等。报修管理界面，管理员在报修管理界面中查看，新增报修信息等。投诉建议管理界面，管理员在投诉建议管理界面中新增投诉建议，可以删除投诉建议。公告管理界面，管理员在公告管理界面查看公告的工作状态，可以对公告的数据进行导出，可以添加新公告的信息，可以编辑公告信息，删除公告信息。
开题报告创权法律服务系统 已通过开题答辩的.doc
07-25
进入20世纪80年代，我国加快了改革开放的步伐，市场经济体制已逐步形成，我国的经济发展受世人所瞩目，但法律法规的置后，使经济发展不规范问题暴露的相当严重，特别是社会整体信用的缺失，使消费环境不断恶化。而如今随着城镇化的高速推进，精神追求远不及物质发展迅速，维权问题也越来越成为人们十分关注的社会话题。 维权是指维护个人或群体的合法权益，范围包括人身损害、土地纠纷、 医疗事故、婚姻、家庭、继承等民事纠纷所进行的行政及司法诉讼。维护消费者合法权益关系着全社会每个人的利益，群众利益无小事。维护消费者合法权益正体现着“权为民所用，利为民所谋”。而现如今由于法律规则的不完善加上自身对法律知识的不了解，导致很多公民的权益问题在复杂的社会情况下无法得到妥善的解决，使得公民的财产和心理受到难以弥补的损失，严重威胁到社会的安全与稳定，公民之间的诚信与统一。因此更便捷、迅速地维护公民的合法权益，已经成为了一个刻不容缓去解决的社会问题。
开题报告大数据统计分析的气候可视化系统 已通过开题答辩的.docx
07-25
互联网的不断发展建设，数据时代的到来，人们对各类数据的挖掘、统计的需求越来越大，爬虫技术的成熟，为人们提供了极大的便利，通过爬虫技术可快速挖掘、统计人们所需数据。 随着计算机技术的发展，天气数据信息化已经成为时代发展必然，天气数据变幻莫测，天气数据每时每刻都在变化，面对大量的天气数据，导致现有的天气数据信息系统已经不能满足大量天气数据挖掘分析的应用需求，因此，人们开始结合天气数据相关特点，进天气数据挖掘方面的研究。只有将天气数据、大数据平台和分析技术很好的耦合，才能为用户提供及时的天气信息，才能更好的分析天气情况。因此，针对天气数据挖掘和分析方面，建立一个大数据统计分析的气候可视化系统是必须的，系统的应用可将天气数据可视化，全面分析，更好的为用户服务。
基于java开发的电子发票识别解析工具，批量重命名，导出表格+源码+项目文档（毕业设计&课程设计&项目开发）
07-25
基于java开发的电子发票识别解析工具，批量重命名，导出表格+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于java开发的电子发票识别解析工具，批量重命名，导出表格+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于java开发的电子发票识别解析工具，批量重命名，导出表格+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于java开发的电子发票识别解析工具，批量重命名，导出表格+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介： 电子发票识别工具，批量重命名发票，导出发票信息表格 功能 批量重命名发票文件 导出excel
b136大学生就业服务平台-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
大学生就业服务平台管理系统按照操作主体分为管理员和用户。管理员的功能包括学生档案管理、字典管理、试卷管理、试卷选题管理、试题表管理、考试记录表管理、答题详情表管理、错题表管理、法律法规管理、法律法规收藏管理、法律法规留言管理、就业分析管理、论坛管理、企业管理、简历管理、老师管理、简历投递管理、新闻资讯管理、新闻资讯收藏管理、新闻资讯留言管理、学生信息管理、宣传管理、学生管理、职位招聘管理、职位收藏管理、招聘咨询管理、管理员管理。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。 大学生就业服务平台管理系统可以提高大学生就业服务平台信息管理问题的解决效率，优化大学生就业服务平台信息处理流程，保证大学生就业服务平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。 管理员权限操作的功能包括管理新闻信息，管理大学生就业服务平台信息，包括考试管理，培训管理，投递管理，薪资管理等，可以管理新闻信息。 考试管理界面，管理员在考试管理界面中可以对界面中显示，可以对考试信息的考试状态进行查看，可以添加新的考试信息等。投递管理界面，管理员在投递管理界面中查看投递种类信息，投递描述信息，新增投递信息等。新闻信息管理界面，管理员在新闻信息管理界面中新增新闻信息，可以删除新闻信息。新闻信息类型管理界面，管理员在新闻信息类型管理界面查看新闻信息的工作状态，可以对新闻信息的数据进行导出，可以添加新新闻信息的信息，可以编辑新闻信息信息，删除新闻信息信息。
监控网站模板（html+js+css）
07-25
内容概要：本资源提供了监控网站的模板，包含 HTML、JS 和 CSS 等相关代码，为用户构建监控网站提供基础架构和样式设计。 适合人群： - 网页开发初学者，希望通过实际项目练习提升技能。 - 有一定基础的前端开发人员，用于快速搭建监控网站原型。 - 对监控网站功能有需求的个人或团队，用于节省开发时间。 能学到什么： - 了解监控网站的页面布局和功能模块设计。 - 掌握 HTML 结构搭建和页面元素的组织。 - 学习 CSS 样式的应用，实现美观的页面展示效果。 - 深入理解 JS 在监控网站中的交互逻辑实现，如数据更新、动态效果等。 阅读建议： - 先整体浏览模板代码，了解各个文件的功能和相互关系。 - 结合代码注释，理解关键部分的实现逻辑和目的。 - 尝试修改代码中的参数和样式，观察页面效果的变化，加深对代码的理解。 - 对于不熟悉的技术点，查阅相关文档和教程进行补充学习。 - 在实际应用中，根据具体需求对模板进行扩展和优化。
毕业设计javajsp班级网站sqlserver-qkrp源码含文档工具包
07-25
毕业设计javajsp班级网站sqlserver-qkrp源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 本网站由用户模块、在线论坛、班级相册、留言簿模块与管理模块等构成，其中用户模块实现了用户注册、登陆与修改个人资料等功能；在线论坛提供交流平台；班级相册实现图片上载和在线浏览功能；留言簿模块实现网上留言功能；管理模块实现用户管理、论坛管理、相册管理与留言簿管理等功能。 包含：源码、数据库脚本、论文、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
ico图片在线制作网站PHP源码 支持多种图片格式转换
07-25
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标. 如果要让网站看起来更专业、更美、更有个性，制造一个favicon.ico是必不可少的！ Favicon.ico图片在线制作网站PHP源码 源码使用说明： 上传至网站目录即可使用，无后台版本. 原始图像可以接受: .jpg .jpeg .gif .png等图像格式. 原始图像文件大小限制在小于175k. 建议制作一张400×400的jpg图像, 然后选择你想转换的ico尺寸再转换成ico图标格式. 当然你也可以直接把原始尺寸的图像通过本网站直接转换，系统会自动将图片缩小到合适的ico图标尺寸，不过可能会在缩小的时候有所失真.
matlab基础知识、案例和相关项目资源
最新发布
07-25
matlab基础知识、案例和相关项目资源 matlab基础知识、案例和相关项目资源 matlab基础知识、案例和相关项目资源 matlab基础知识、案例和相关项目资源 matlab基础知识、案例和相关项目资源
用HTML+css画一个哆啦a梦
06-08
好的，下面是一个用HTML+CSS画哆啦A梦的示例： 1. 首先，我们需要一个HTML文件，可以使用以下代码： ``` <!DOCTYPE html> 哆啦A梦 #doraemon { position: relative; width: 200px; height: 200px;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值