纯CSS画哆啦A梦

最新推荐文章于 2023-06-25 20:51:27 发布
最新推荐文章于 2023-06-25 20:51:27 发布
阅读量834 收藏 8
点赞数 2
分类专栏： CSS 文章标签： CSS 动画 animation 哆啦A梦
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lynn_rose/article/details/87893816
版权

如何用纯CSS画出一个哆啦A梦？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>哆啦A梦</title>
	<style>
		*{
			margin:0;padding:0;
		}
		section{
			width:600px;
			height:800px;
			margin:100px auto;
			position:relative;
		}
		#head{
			width:400px;
			height:400px;
			background:#08bbe6;
			border-radius:200px;
			margin:0 auto;
			border:2px solid #000;
			position:relative;
		}
		.face{
			width:320px;
			height:240px;
			background:#fff;
			border-radius:120px;
			position:absolute;
			top:130px;
			left:39px;
			border:2px solid #000;
		}
		#neck{
			width:300px;
			height:30px;
			background:#b93300;
			border-radius:15px;
			position:absolute;
			left:149px;
			top:340px;
			border:2px solid #000;
			z-index: 1
		}
		.bell{
			width:50px;
			height:50px;
			background:#e1d916;
			border:2px solid #000;
			border-radius:25px;
			position:absolute;
			left:125px;
			top:10px;
		}
		.bellLine{
			width:44px;
			height:3px;
			border:2px solid #000;
			position:absolute;
			left:128px;
			top:22px;
		}
		.blackDot{
			width:20px;
			height:20px;
			background:#000;
			border-radius:10px;
			position:absolute;
			left:142px;
			top:32px;
		}
		.backLine{
			width:3px;
			height:10px;
			background:#000;
			position:absolute;
			left:151px;
			top:52px;
		}
		.eyeOne{
			width:90px;
			height:100px;
			background:#fff;
			border-radius:43px;
			border:1px solid #000;
			position:absolute;
			left:110px;
			top:80px;
		}
		.eyeTwo{
			width:90px;
			height:100px;
			background:#fff;
			border-radius:43px;
			border:1px solid #000;
			position:absolute;
			left:200px;
			top:80px;
		}
		.eyeball{
			width:30px;
			height:30px;
			background:#000;
			border-radius:15px;
			position:absolute;
			left:30px;
			top:70px;
		}
		.nose{
			width:40px;
			height:40px;
			background:#ca3e01;
			border-radius:20px;
			border:1px solid #000;
			position:absolute;
			left:139px;
			top:35px;
		}
		.mouthLine{
			width:4px;
			height:105px;
			background:#000;
			position:absolute;
			left:158px;
			top:76px;
		}
		.mouth{
			width:150px;
			height:50px;
			border-bottom:3px solid #000;
			border-radius:0 0 75px 75px/0 0 50px 50px;
			position:absolute;
			left:85px;
			top:130px;
		}
		#body{
			width:280px;
			height:200px;
			background:#08bbe6;
			position:absolute;
			left:159px;
			top:372px;
			border:2px solid #000;
			border-top:0;
		}
		.tummy{
			width:200px;
			height:150px;
			background:#fff;
			border-radius:0 0 100px 100px;
			position:absolute;
			left:39px;
			top:-10px;
			border:2px solid #000;
			border-top:0;
		}
		.bag{
			width:150px;
			height:80px;
			border:2px solid #000;
			border-radius:0 0 75px 75px;
			position:absolute;
			left:24px;
			top:50px;
		}
		.ban{
			width:30px;
			height:16px;
			background:#fff;
			border:2px solid #000;
			border-bottom:0;
			border-radius:16px 16px 0 0;
			position:absolute;
			left:85px;
			top:194px;
		}
		.legOne{
			width:160px;
			height:40px;
			background:#fff;
			border:2px solid #000;
			border-radius:27px 20px 20px 15px;
			position:absolute;
			left:-24px;
			top:200px;
		}
		.legTwo{
			width:160px;
			height:40px;
			background:#fff;
			border:2px solid #000;
			border-radius:20px 27px 15px 20px;
			position:absolute;
			right:-29px;
			top:200px;
		}
		.armOne{
			width:80px;
			height:40px;
			background:#08bbe6;
			border:2px solid #000;
			position:absolute;
			left:-40px;
			top:30px;
			border-radius:20px 0 0 20px;
		}
		.armTwo{
			width:80px;
			height:40px;
			background:#08bbe6;
			border:2px solid #000;
			position:absolute;
			right:-43px;
			top:30px;
			border-radius:0 20px 20px 0;
		}
		.handOne{
			width:60px;
			height:60px;
			background:#fff;
			border:2px solid #000;
			position:absolute;
			left:35px;
			top:20px;
			border-radius:30px;
		}
		.handTwo{
			width:60px;
			height:60px;
			background:#fff;
			border:2px solid #000;
			position:absolute;
			right:32px;
			top:20px;
			border-radius:30px;
		}
		#heart{
			width:150px;
			height:150px;
			position:absolute;
			left:242px;
			top:370px;
			z-index:1;
			transform: scale(0.9);
		}
		#heart:before {
        	content: "";
        	position:absolute;
        	top: 0;
			left: 60px;
        	width: 80px;
        	height: 140px;
        	background-color: red;
        	border-radius: 150px 150px 0 0 ;
        	transform: rotate(-45deg);
        	transform-origin:0 100%; 
        }
		#heart:after {
			content: "";
        	position:absolute;
        	top: 0;
			right: 90px;
        	width: 80px;
        	height: 140px;
        	background-color: red;
        	border-radius: 150px 150px 0 0 ;
        	transform: rotate(45deg);
        	transform-origin: 100% 100%;
        }
		#heart {
        	animation-name:heartbeat; 
        	animation-duration:2000ms;
        	animation-timing-function:cubic-bezier(0,0,0,1.74);
        	animation-delay:500ms;
        	animation-iteration-count:infinite;
        	animation-play-state:running;     
        }
		@keyframes heartbeat{
        	0%{transform: scale(0.95);}
        	50%{transform: scale(1);}
        	100%{transform: scale(0.95);}
        }
	</style>
</head>
<body>
	<section>
		<div id="head">
			<div class="face">
				<div class="nose"></div>
				<div class="mouthLine"></div>
				<div class="mouth"></div>
			</div>
			<div class="eyeOne">
				<div class="eyeball"></div>
			</div>
			<div class="eyeTwo">
				<div class="eyeball"></div>
			</div>
		</div>
		<div id="neck">
			<div class="bell"></div>
			<div class="bellLine"></div>
			<div class="blackDot"></div>
			<div class="backLine"></div>
		</div>
		<div id="body">
			<div class="tummy">
				<div class="bag"></div>
				<div class="ban"></div>
			</div>
			<div class="legOne"></div>
			<div class="legTwo"></div>
			<div class="armOne"></div>
			<div class="armTwo"></div>
			<div class="handOne"></div>
			<div class="handTwo"></div>
		</div>
		<div id="heart"></div>
	</section>
</body>
</html>

效果图如下：
在这里插入图片描述

Leedia__
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯CSS3绘制哆啦A梦头像动画代码
09-08
在本项目中，我们将探讨如何使用纯CSS3技术来创建一个动态的哆啦A梦头像。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和功能，使网页设计更为丰富和交互性更强。在"纯CSS3绘制哆...
纯css3绘图哆啦a梦机器猫头像特效
11-24
在本案例中，我们将探讨如何使用纯CSS3绘制哆啦A梦机器猫的头像特效。 首先，让我们理解CSS3绘图的基本概念。CSS3引入了若干新的绘图工具，如边框半径、渐变、阴影、多列布局以及变换、过渡和动画等。这些特性为...
纯CSS3画哆啦A梦
GongWei_的博客
01-04 275
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>哆啦A梦</title> <style type="text/css"> .big{ width: 500px; height: 680px; border:1px solid black; position: absol.
纯css画哆啦A梦
weixin_30776545的博客
04-28 90
今天有点无聊，照着网上的图写了个哆啦A梦，无技术可言，纯考耐心。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
用纯css做出表情可动的哆啦a梦
xgshoshi的博客
07-23 625
使用css制作的可爱哆啦a梦，鼠标移动对应的部位，表情也会产生变化
纯CSS画图——哆啦A梦
cily
06-24 6830
最近突然想用前端代码画图，然后就去百度找了一张哆啦A梦的图片，用DIV+CSS画，虽然最后的结果还是有些差异，不过也就差不多可以看啦~ dlam.html 哆啦A梦
用css3画一个哆啦A梦
chengzihy的专栏
07-28 4887
今天偶然看到朋友用纯css3画了一个素描杯，很受启发，css3这么好玩的代码再不玩就要荒废了，于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位，其次是通过边框属性来切割棱角分明的盒子，让线条看起来流畅，还有就是通过z-index属性来控制图层，@keyframes可以让你的图片动起来，更加生动，接下来就一起复习一下这几个属性吧，然后就可以自己动手作画了。 **1.
用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画
setsunadoudou的博客
09-16 303
本人是学生，正在想深入学习html5和css3，所以最近在研究用css3绘制矢量图，于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画， 动画的宽高比例为：...
利用纯canvas画一个哆啦A梦
rraxx的博客
12-18 665
搭建绘画环境 1. 设置两个Div，分别获取页面中的x,y坐标 html代码：<canvas id="cv_1" width="500" height="600"></canvas> <div id="div1"></div> <div id="div2"></div> css代码：div{ top: 500px; border: 1px solid red; width: 50px; heigh
div+css制作哆啦A梦
dianxunyan8950的博客
05-10 258
纯CSS代码加上制作动画版哆啦A梦（机器猫） 哆啦A梦（机器猫）我们大家一定都很熟悉，今天给大家演示怎么用纯CSS。代码，来做一个动画版的哆啦A梦. 效果图： 下面代码同学可以查看一下，每个线条及椭圆都是纯CSS代码生成。 首先分析结构 根据原图，将哆啦A梦分为几个结构，然后再分解其他部位。 画出各部分的形状和颜色，然后使用绝对定位（absolute）和相对定位（relative）改变其...
前端学习记录---纯CSS,HTML画出哆啦A梦
Mr_Car的博客
03-11 1212
自己测量数据写的。初学已经很有成就感，继续加油。 下面是body内的所有代码： <body> <div class="center"> <!-- 头 --> <div class="head"> <div class="face"> &...
纯CSS3多啦A梦机器猫特效特效代码
03-20
【纯CSS3多啦A梦机器猫特效代码详解】 在现代网页设计中，CSS3的引入为开发者提供了更丰富的表现力和动态效果。本篇将详细介绍如何利用纯CSS3实现一款可爱的多啦A梦机器猫招手转眼睛的动画特效。这个特效不仅能够...
纯CSS3绘制的哆啦A梦头像动画效果源码.zip
11-20
【标题】中的“纯CSS3绘制的哆啦A梦头像动画效果源码”表明了这是一个使用纯CSS3技术实现的哆啦A梦头像动画项目。CSS3是层叠样式表（Cascading Style Sheets）的第三版，相较于之前的版本，它引入了许多新的特性和...
纯CSS3多啦A梦机器猫特效.zip
07-04
标题中的“纯CSS3多啦A梦机器猫特效”指的是使用纯CSS3技术实现的一款动画效果，它将经典的卡通角色——多啦A梦机器猫设计成了具有动态功能的元素，如招手和转动眼睛等。CSS3是层叠样式表（Cascading Style Sheets）...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5652
再看代码： JS部分。
FLY（数据迁移工具） 官方部署操作手册4.9 2022.05月版本
08-05
https://cdn.avepoint.com/pdfs/ape/FLY_Installation_Guide_zh-cn_v
[毕业设计]Java多媒体租赁店管理系统设计与实现(源代码+论文).zip
08-05
[毕业设计]Java多媒体租赁店管理系统设计与实现(源代码+论文)
[java毕业作品]VB.NET+Access电表数据可视化分析系统(源代码+论文)
最新发布
08-05
[java毕业作品]VB.NET+Access电表数据可视化分析系统(源代码+论文)
用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梦就完成了。希望这个示例对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值