用基础的HTML和CSS画出一个哆啦A梦

最新推荐文章于 2024-08-12 19:53:36 发布

从前那个很好的人

最新推荐文章于 2024-08-12 19:53:36 发布

阅读量1.4k

点赞数 10

文章标签：前端 css html 基础

本文链接：https://blog.csdn.net/weixin_45172028/article/details/99686182

版权

前言

利用html和css中的定位和css3的2D转换属性，画出一个蓝胖子。

在页面上效果

这个一个蓝胖子

HTML代码

<div class="ddm">
    <!-- 头部 -->
    <div class="ddm-h">
        <!-- 脸 -->
		<div class="ddm-h-l">
            <!-- 眼 -->
			<div class="yanjingl">
				<div class="heiyuan"></div>
			</div>
			<div class="yanjingr">
				<div class="heiyuan2"></div>
			</div>
			<!-- 面部 -->
			<div class="mb"> 
				<!-- 鼻子 -->
				<div class="bz"> 	
					<div class="g"></div>
					<div class="te2">
						<!-- 嘴 -->
						<div class="zuiba"></div>
					</div>
				</div>
				<!-- 胡子 -->
				<div class="hz-l">
					<p></p><p></p><p></p>
				</div>
				<div class="hz-r">
					<p></p><p></p><p></p>
				</div>	
			</div>
		</div>
	</div>

    <!-- 脖子 -->
	<div class="ddm-wb"></div>
	<div class="ddm-st">
		<div class="te3"></div>
			<div class="te">
				<div class="ddm-st-b">
					<div class="banyuan"></div>
				</div>
			</div>
		<!-- 铃铛 -->
		<div class="lingdang">
			<p></p><b></b>
		</div>
		<!-- 手 -->
		<div class="ddm-zs"></div>
		<div class="ddm-ys"></div>
	</div>

    <!-- 脚 -->
	<div class="ddm-j">
		<div class="ddm-zj"></div>
		<div class="ddm-yj"></div>
	</div>
</div>

css样式

@charset "utf-8";

.ddm{padding-top:10px; margin:50px auto;background:#999;height:480px;width:520px;display:flex;flex-direction:column;align-items:center;
}

/*头*/
.ddm-h{position:relative; width:314px;height:290px;background:#0495cc;border:2px solid #565656;border-radius:50%;box-shadow:-6px 0 6px #acacac;}

/*脸*/
.ddm-h .ddm-h-l{width:250px;height:210px;background:#fff;border-radius:50%;border:2px solid #000;position:absolute;top:75px;left:0;right:0;margin:auto;}

/*眼*/
.ddm-h .ddm-h-l .yanjingl{position:absolute;left:50px;top:-30px; width:72px;height:83px;border:2px solid #000;background:#fff;border-radius:45%;}
.ddm-h .ddm-h-l .yanjingr{position:absolute;right:50px;top:-30px; width:72px;height:83px;border:2px solid #000;background:#fff;border-radius:45%;}

.ddm-h .ddm-h-l .heiyuan{ position:absolute;right:15px;bottom:15px; width:15px;height:15px;background:#000;border-radius:50%;}
.ddm-h .ddm-h-l .heiyuan2{position:absolute;left:15px;bottom:15px; width:15px;height:15px;background:#000;border-radius:50%;}

.ddm-h .ddm-h-l .mb{position:absolute;left:126px;top:-20px}

/*鼻子*/
.ddm-h .ddm-h-l .bz{position:absolute;top:72px;left:-20px; width:34px;height:34px;background:#ca3e01;border-radius:50%;border:2px solid #000;}
.ddm-h .ddm-h-l .bz .g{position:absolute;top:36px;left:0;right:0;margin:auto; width:3px;height:70px;background:#333;}
.ddm-h .ddm-h-l .bz .te2{position:absolute;top:50px;left:-60px; width:154px;height:58px;overflow:hidden;}

/*嘴巴*/
.ddm-h .ddm-h-l .bz .zuiba{position:absolute;bottom:0;left:-22px; width:190px;height:126px;border:2px solid #000;border-radius:50%;}

/*胡子*/
.ddm-h .ddm-h-l .hz-l{position:absolute;left:-100px;top:105px; }
.ddm-h .ddm-h-l .hz-l p{width:60px;height:2px;background:#000;margin-bottom:16px;}
.ddm-h .ddm-h-l .hz-l p:nth-child(1){transform:rotate(20deg);}
.ddm-h .ddm-h-l .hz-l p:nth-child(3){transform:rotate(-20deg);}
.ddm-h .ddm-h-l .hz-r{position:absolute;left:36px;top:106px; }
.ddm-h .ddm-h-l .hz-r p{width:60px;height:2px;background:#000;margin-bottom:16px;}
.ddm-h .ddm-h-l .hz-r p:nth-child(1){transform:rotate(-20deg);}
.ddm-h .ddm-h-l .hz-r p:nth-child(3){transform:rotate(20deg);}

/*脖子*/
.ddm-wb{ margin-top:-45px;position:relative; width:230px;height:20px;background:#9a1800;border:2px solid #000;border-radius:8px;box-shadow:-6px 0 6px #acacac;}

/*身体*/
.ddm-st{position:relative;width:220px;height:156px;background:#0495cc;border:2px solid #000;border-bottom:0;box-shadow:-6px 0 6px #acacac;}
.ddm-st .te3{position:absolute;bottom:0;right:0;left:0;margin:auto;border:2px solid #000;border-bottom:0; width:24px;height:12px;background:#fff;border-radius:12px 12px 0 0 ;}
.ddm-st .te{position:absolute;width:220px;height:156px;overflow:hidden;}
.ddm-st .te .ddm-st-b{position:absolute;left:0;right:0;margin:auto;top:-40px;  width:170px;height:170px;background:#fff; border:2px solid #000;border-radius:50%;}
.ddm-st .te .ddm-st-b .banyuan{position:absolute;left:0;right:0;margin:auto;top:85px; width:130px;height:65px;border-radius: 0 0 65px 65px;border:2px solid #000;}

/*手*/
.ddm-st .ddm-zs{transform:rotate(-33deg) translate(27px,33px); position:absolute;left:-92px;width:67px;height:47px;background:#0495cc;border:2px solid #000;border-right:0;}
.ddm-st .ddm-zs:after{content:"";position:absolute;left:-45px;top:-10px; display:block; width:65px;height:65px;background:#fff;border-radius: 50%;border:2px solid #000;}
.ddm-st .ddm-ys{transform:rotate(35deg)  translate(-15px,32px);position:absolute;right:-92px;width:79px;height:44px;background:#0495cc;border:2px solid #000;border-left:0;}
.ddm-st .ddm-ys:after{content:"";position:absolute;left:45px;top:-10px; display:block; width:65px;height:65px;background:#fff;border-radius: 50%;border:2px solid #000;}


/*铃铛*/
.ddm-st .lingdang{position:absolute;top:-19px; right:0;left:0;margin:auto; width:40px;height:40px;background:#f5ed26;border:2px solid #000;border-radius:50%;box-shadow:-2px 2px 4px #acacac;}
.ddm-st .lingdang p{position:absolute;left:0px;top:10px; height:6px;width:40px;background:#333;}
.ddm-st .lingdang p:after{content:"";position:absolute;width:36px;height:2px;background:#ff0;top:0;bottom:0;left:0;right:0;margin:auto;}
.ddm-st .lingdang b{position:absolute; width:12px;height:10px;background:#000;border-radius:50%;left:0;right:0;margin:auto;top:20px;}
.ddm-st .lingdang b:after{content:"";position:absolute;width:3px;height:10px;background:#000;top:10px;left:0;right:0;margin:auto;}

/*脚*/
.ddm-j{display:flex;width:260px;height:30px;justify-content:space-between;}
.ddm-j .ddm-zj{ width:125px;height:30px;background:#fff;border:2px solid #000;border-radius:20px 15px 15px 10px;box-shadow:-6px 0 6px #acacac;}
.ddm-j .ddm-yj{width:125px;height:30px;background:#fff;border:2px solid #000;border-radius:15px 20px 10px 15px; }

效果不是太美观，感兴趣的小伙伴可在做的更好一点。