纯 css画小黄人

于 2022-04-13 09:29:17 发布
阅读量378 收藏 2
点赞数
分类专栏： css 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Teemo_shape/article/details/124140467
版权

搬运的，实在是太可爱

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>drawLittleHuang</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div class="wrapper"><!-- 容器 -->
		<div class="littleH"><!-- 小黄人 -->
			<div class="bodyH"><!-- 身体 -->
				<div class="trousers"><!-- 裤子 -->
					<div class="condoleBelt"><!-- 吊带 -->
						<div class="left"></div>
						<div class="right"></div>
					</div>
					<div class="trousers_top"></div><!-- 裤子突出的矩形部分 -->
					<div class="pocket"></div><!-- 裤袋 -->
					<!-- 三条线 -->
					<span class="line_left"></span>
					<span class="line_right"></span>
					<span class="line_bottom"></span>
				</div>
			</div>
			<div class="hair"><!-- 头发 -->
				<span class="left_hair_one"></span>
				<span class="left_hair_two"></span>
			</div>
			<div class="eyes"><!-- 眼睛 -->
				<div class="leftEye"><!-- 左眼 -->
					<div class="left_blackEye">
						<div class="left_white"></div>
					</div>
				</div>
				<div class="rightEye"><!-- 右眼 -->
					<div class="right_blackEye">
						<div class="right_white"></div>
					</div>
				</div>
			</div>
			<div class="mouse"><!-- 嘴巴 -->
				<div class="mouse_shape"></div>
			</div>
			<div class="hands"><!-- 双手 -->
				<div class="leftHand"></div>
				<div class="rightHand"></div>
			</div>
			<div class="feet"><!-- 双脚 -->
				<div class="left_foot"></div>
				<div class="right_foot"></div>
			</div>
			<div class="groundShadow"></div><!-- 脚底阴影 -->
		</div>
	</div>
</body>
</html>
@charset "utf-8";

body{
	margin: 0;
	padding:0;
}
.wrapper{
	width: 300px;
	margin:100px auto;
}
.litteH{
	position: relative;
}
.bodyH{
	position: absolute;
	width: 240px;
	height: 400px;
	border:5px solid #000;
	border-radius: 115px;
	background: rgb(249,217,70);
	overflow: hidden;
	z-index: 2;
}
.bodyH .condoleBelt{
	position: absolute;
}
.bodyH .condoleBelt .left,
.bodyH .condoleBelt .right{
	width: 100px;
	height: 16px;
	border:5px solid #000;
	background: rgb(32,116,160);
	position: absolute;
	top:-90px;
	left:-35px;
	z-index: 2;
	-webkit-transform:rotate(45deg);
}
.bodyH .condoleBelt .left{
	top:-88px;
	left:165px;
	-webkit-transform:rotate(-45deg);
}
.bodyH .condoleBelt .left:after,
.bodyH .condoleBelt .right:after{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #000;
	position: absolute;
	top:4px;
	left:88px;
}

.bodyH .condoleBelt .left:after{
	left:5px;
}
.bodyH .trousers{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
	border-top: 6px solid #000;
	background: rgb(32,116,160);
}
.trousers_top{
	width: 160px;
	height: 60px;
	border:6px solid #000;
	border-bottom: none;
	border-radius: 0 0 5px 5px;
	background: rgb(32,116,160);
	position: absolute;
	bottom: 100px;
	left:34px;
}
.pocket{
	width: 60px;
	height: 45px;
	border:6px solid #000;
	border-radius: 0px 0px 25px 25px;
	position: absolute;
	bottom:65px;
	left:84px;
}
.line_right{
	width: 30px;
	height: 30px;
	border-bottom-left-radius: 100px;
	border-bottom:6px solid #000;
	border-left:6px solid #000;
	position: absolute;
	left: 0;
	bottom:60px;
	-webkit-transform:rotate(-75deg);
}
.line_left{
	width: 30px;
	height: 30px;
	border-bottom-right-radius: 100px;
	border-bottom:6px solid #000;
	border-right:6px solid #000;
	position: absolute;
	right: 0;
	bottom:63px;
	-webkit-transform:rotate(75deg);
}
.line_bottom{
	height: 40px;
	border:3px solid #000;
	border-radius: 3px;
	position: absolute;
	left:118px;
	bottom: 0px;
}
.hair{
	position: relative;
}
.left_hair_one{
	width: 130px;
	height: 100px;
	border-radius: 50%;
	border-top:8px solid #000;
	position: absolute;
	left:17px;
	top:-17px;
	-webkit-transform:rotate(27deg);
	-webkit-animation: lefthair 2s ease-in-out infinite;
}
@-webkit-keyframes lefthair{
	0%,25%,31%,100%{
	}
	30%{
		-webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
	}
}
.left_hair_two{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border-top:6px solid #000;
	position: absolute;
	left:45px;
	top:-10px;
	-webkit-transform:rotate(15deg);
}
.eyes{
	position: relative;
	z-index: 3;
}
.eyes .leftEye,.eyes .rightEye{
	width: 85px;
	height: 85px;
	border-radius: 50%;
	border:6px solid #000;
	background: #fff;
	position: absolute;
	top:60px;
	left: 27px;
}
.eyes .leftEye{
	left: 124px;
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #000;
	position: absolute;
	top:24px;
	left:22px;
	-webkit-animation: blackeye 5s ease-in infinite;
}
@-webkit-keyframes blackeye{
	0%,20%,50%,70%,100%{
		-webkit-transform: translateX(0px);
	}
	30%,40%{
		-webkit-transform: translateX(15px);
	}
	80%,90%{
		-webkit-transform: translateX(-15px);
	}
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top:7px;
	left:17px;
	-webkit-animation: whiteeye 5s ease-in-out infinite;
}
@-webkit-keyframes whiteeye{
	0%,20%,50%,70%,100%{
		-webkit-transform: translateX(0px);
	}
	30%,40%{
		-webkit-transform: translate3d(3px,4px,0);
	}
	80%,90%{
		-webkit-transform: translate3d(-15px,4px,0);
	}
}
.eyes .leftEye .left_blackEye .left_white{
	top:4px;
	left:17px;
}
.eyes .leftEye:after,
.eyes .rightEye:after{
	content: '';
	width: 28px;
	height: 18px;
	background: #000;
	position: absolute;
	left:-30px;
	top:37px;
	-webkit-transform:skewX(20deg) rotate(7deg);
}
.eyes .leftEye:after{
	left:89px;
	top:37px;
	-webkit-transform:skewX(-20deg) rotate(-7deg);
}
.mouse{
	position: relative;
}
.mouse .mouse_shape{
	width: 55px;
	height: 35px;
	border:5px solid #000;
	border-bottom-left-radius: 30px;
	background: #fff;
	position: absolute;
	top:175px;
	left:98px;
	z-index: 3;
	-webkit-transform:rotate(-35deg);
	-webkit-animation: mouse 5s ease-in-out infinite;
}
@-webkit-keyframes mouse{
	40%,43%{
		width: 45px;
	    height: 25px;
	    top:180px;
	}
	0%,35%,48%,100%{
		width: 55px;
	    height: 35px;
	    top:175px;
		-webkit-transform:rotate(-35deg);
	}
}
.mouse .mouse_shape:after{
	content: '';
	width: 70px;
	height: 32px;
	border-bottom:5px solid #000;
	border-radius:35px 26px 5px 5px;
	background: rgb(249,217,70);
	position: absolute;
	top:-16px;
	left:3px;
	-webkit-transform:rotate(34deg);
	-webkit-animation: mouse_mask 5s ease-in-out infinite;
}
@-webkit-keyframes mouse_mask{
	40%,43%{
		width: 60.5px;
		top:-19.3px;
		left:1.5px;
	}
	0%,35%,48%,100%{
		width: 70px;
		top:-16px;
		left:3px;
		-webkit-transform:rotate(33deg);
	}
}
.hands{
	position: relative;
}
.hands .leftHand,
.hands .rightHand{
	width: 80px;
	height: 80px;
	border:6px solid #000;
	border-radius: 25px;
	background: rgb(249,217,70);
	position: absolute;
	top:220px;
	left:-23px;
	-webkit-transform:rotate(40deg);
	-webkit-animation:rightHand .8s ease-in-out infinite;
}
@-webkit-keyframes rightHand{
	0%,50%,100%{
		-webkit-transform: rotate(40deg);
	}
	30%{
		-webkit-transform: rotate(37deg) translateX(1px);
	}
}
.hands .leftHand{
	left:182px;
	top:220px;
	-webkit-transform:rotate(-40deg);
	-webkit-animation:leftHand .8s ease-in-out infinite;
}
@-webkit-keyframes leftHand{
	0%,50%,100%{
		-webkit-transform: rotate(-40deg);
	}
	80%{
		-webkit-transform: rotate(-37deg) translateX(-1px);
	}
}
.hands .leftHand:after,
.hands .rightHand:after{
	content: '';
	width: 6px;
	border:3px solid #000;
	border-radius: 3px;
	position: absolute;
	left:13px;
	top:50px;
	-webkit-transform:rotate(90deg);
}

.hands .leftHand:after{
	left:53px;
	top:50px;
	-webkit-transform:rotate(-90deg);
}
.feet{
	position: relative;
}
.feet .left_foot,
.feet .right_foot{
	width: 36px;
	height: 50px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 9px;
	background: #000;
	position: absolute;
	top: 406px;
	left:88px;
	-webkit-transform-origin: right top;
	-webkit-animation: rightfoot .8s ease-in-out infinite;
}
@-webkit-keyframes rightfoot{
	0%,50%,100%{
		-webkit-transform: rotate(0deg);
	}
	80%{
		-webkit-transform: rotate(10deg);
	}
}
.feet .left_foot{
	border-bottom-right-radius: 9px;
	border-bottom-left-radius: 6px;
	left:130px;
	-webkit-transform-origin: left top;
	-webkit-animation: leftfoot .8s ease-in-out infinite;
}
@-webkit-keyframes leftfoot{
	0%,50%,100%{
		-webkit-transform: rotate(0deg);
	}

	30%{
		-webkit-transform: rotate(-10deg);
	}
}
.feet .left_foot:after,
.feet .right_foot:after{
	content: '';
	width: 60px;
	height: 35px;
	border-radius: 20px 10px 21px 15px;
	background: #000;
	position: absolute;
	left:-36px;
	top:14.4px;
	-webkit-transform:rotate(5deg);
}
.feet .left_foot:after{
	border-radius: 10px 20px 15px 21px;
	left:13px;
	-webkit-transform:rotate(-5deg);
}
.groundShadow{
	width: 200px;
	height: 2px;
	border-radius: 50%;
	background: rgba(0,0,0,0.3);
	box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
	position: relative;
	top: 455px;
	left:25px;
}

_小太子
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3打造属于自己的“小黄人”
01-19
效果就像这样： 不废话，直接上代码！ hrml代码： XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>   <html>   <head lang=zh>       <meta charset=UTF-8>       <title>纯CSS3画出小黄人并实现动画效果</title>       <Link href=index.css type=text/css rel=stylesheet />   </head>   <body>       <!–容器–>  
css选择器
weixin_47655184的博客
05-09 90
css选择器 1.css文件建立在左侧文件树css文件夹中 2.css文件在网页head--head之间建立link，关联css修饰文件和网页 例如：<link rel="stylesheet" type="text/css" href="css文件链接"/> 3.css3基本选择器 3.1.标签选择器 html: css3: <h1>--<h1>.
css 画小黄人,纯CSS3画出小黄人并实现动画效果
weixin_34792357的博客
08-04 479
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画...
纯CSS小黄人，让你眼前一亮的CSS技巧
jason_renyu的博客
10-30 293
纯CSS制作，小黄人动画 这是由纯CSS制作的小黄人动画 <!-- * @Author: shenzhipeng * @Email: [email protected] * @Date: 2020-08-28 14:39:49 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo.
纯CSS3画出小黄人并实现动画效果
yujunjie7的博客
07-12 374
切记改HTML部分的CSS引入 HTML部分： <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <title>纯CSS3画出小黄人并实现动画效果</title> <link rel="stylesheet" typ...
纯css3 小黄人
09-17
闲暇时间看了一下CSS3，并用CSS3写了一个最近很流行的小黄人
CSS3实现可爱的小黄人动画
09-24
主要为大家详细介绍了CSS3实现可爱的小黄人动画的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯CSS3动画按钮
06-12
7种CSS3特效动画效果，鼠标hover之后的动画效果相当不错，下拉效果，右移效果，箭头划过效果等等
css制作小黄人
notChange的博客
06-29 654
制作小黄人 实现效果，其中，头发和眼睛有动画效果 制作过程 制作容器 <!-- 容器 --> <div class="wrap"> <!-- 头发 --> <div class="xhr_hair"> <div class="xhr_hair_1"></div> <div class="xhr_hair...
用CSS画小猪佩奇 纯HTML画小猪佩奇 你就是下一个社会人（附带课件教程）
08-09
手把手教你用CSS画一只小猪佩奇 里面有源码和教程（PPT课件） 关键CSS属性讲解 实现原理讲解和演示 总结和拓展
html设计动画小黄人,用纯css3画一个小黄人并实现动画效果
weixin_30641571的博客
06-07 622
[摘要]本文用纯css3画出一个动态的小黄人页面，代码简洁高效，是一个非常实用的CSS3学习案例。不得不说CSS3的出现让网页更加绚丽生动，以前需要用图片来实现的效果现在完全可以通过几段css来解决，也解决了图片素材在分辨率变化的时候模糊的情况。更有高手通过css3来实现一些复杂的动画效果，比如就有一位CSS3高手用纯代码画了一个小黄人，并且还有动画效果。动态的效果如下怎么样，是不是很生动，而这个...
html设计动画小黄人,纯CSS3画出小黄人并实现动画效果
weixin_42588555的博客
06-07 395
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画...
用html和css制作小黄人,纯CSS3画出小黄人并实现动画效果
weixin_42510841的博客
06-14 225
原标题：纯CSS3画出小黄人并实现动画效果作者：郭锦荣www.cnblogs.com/jr1993/p/4658772.html前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来...
html设计动画小黄人,CSS3实现可爱的小黄人动画
weixin_34706684的博客
06-07 274
每次看到CSS3动画就心痒痒想试一下，记得一个多月前看了白树哥哥的一篇博客，突然开窍，于是拿他提供的demo试了一下，感觉很棒！下图为demo提供的动画帧设计稿。自己也想说搞一个DIY的动画出来，可是，会PS不一定会设计啊，我搞不出一套动画设计稿出来啊【抓狂】….于是乎，去了站酷网找找素材，我果然还是太天真了，最后从心只找到了一张图：联想到我要做CSS3动画，呵呵……怎么办 ? ——没办法，抠呗！...
css实现小黄人图像的制作与动画效果的实现
weixin_42672456的博客
07-27 230
Document ...
【前端切图】用css画一个卡通形象-小猪佩奇
祈澈菇凉
05-28 2761
最近在腾讯云技术社区遇到了一位奇才，用css画出了一个社会人小猪佩奇，不得不服。研究了一下他的文章https://segmentfault.com/a/1190000014909658，感觉甚是有趣，果断收藏。话不多说，直接贴一张生动到一塌糊涂的图。前端代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;用cs...
【css】使用css画机器人
夜雨Gecer的博客
09-06 800
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { display: flex; ...
【CSS之美】原来纯CSS也能绘制人物头像
dac_bb的专栏
03-19 2176
这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》（The Simpsons）是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘，用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。     温馨提示：为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中
用html和css制作小黄人,微信小程序相关css写小黄人(示例代码)
最新发布
06-08
微信小程序相关CSS写小黄人的示例代码： WXML代码： ```html <view class="body"></view> <view class="eye"></view> <view class="eye"></view> <view class="mouth"></view> ``` WXSS代码： ```css ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值