css写一个小黄人

末蓝、 2022-02-15 14:51 225阅读 0赞

## 小黄人 ##

实现思想：  
1、用一个容器装小黄人，样式定位为相对定位：`<div class="wrap"></div>`  
2、把整个小黄人的身体做出来，然后添加头发；  
3、实现小黄人的手臂；  
4、小黄人的腿、脚；  
5、小黄人的眼睛、眼镜、眼球部分  
6、衣服部分。  
我这里主要使用伪元素，CSS3的动画animation，transform；  
**Animation**:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向  
div部分代码

div class="wrap">
    	
    	<div class="xhr_hair">
    		<div class="xhr_hair_1"></div>
    		<div class="xhr_hair_2"></div>
    	</div>
    	
    	<div class="xhr_body">
    			
    			<div class="xhr_eyes">
    					
    				<div class="xhr_eyes_l">
    					<div class="xhr_l_black"></div>
    					<div class="xhr_l_white"></div>
    				</div>
    					
    				<div class="xhr_eyes_r">
    					<div class="xhr_r_black"></div>
    					<div class="xhr_r_white"></div>
    				</div>
    			</div>
    			
    			<div class="xhr_mouth"></div>
    			
    			<div class="xhr_trousers">
    				
    				<div class="xhr_trousers_t">
    					<div class="t_l_belt"></div>
    					<div class="t_r_belt"></div>
    				</div>
    				
    				<div class="xhr_trousers_b"></div>
    
    			</div>
    			</div>
    			
    			<div class="xhr_hand">
    				<div class="xhr_hand_l"></div>
    				<div class="xhr_hand_r"></div>
    			</div>
    			
    			<div class="footer">
    				<div class="xhr_footer_l"></div>
    				<div class="xhr_footer_r"></div>
    			</div>
    		</div>

CSS代码：

<style>
    			.wrap{
    				width: 400px;
    				height: 600px;
    				margin: 0 auto;
    				border: 1px solid red;
    				position: relative;
    			}
    			
    			/*身体*/
    			.xhr_body{
    				width: 250px;
    				height: 400px;
    				border: 5px solid #000;
    				border-radius: 125px;
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				/*居中方法*/
    				/*margin-top: -205px;
    				/*margin-left: -130px;*/
    				transform: translate(-50%, -50%);/*居中方法*/
    				background: yellow;
    				border-bottom: 5px solid #000;
    				overflow: hidden;
    			}
    			
    			/*头发*/
    			.xhr_hair_1,.xhr_hair_2{
    				width: 140px;
    				height: 100px;
    				border-top: 10px solid #000;
    				border-radius: 50%;
    				position: absolute;
    			}
    			.xhr_hair_1{
    				left: 100px;
    				top: 80px;
    				transform: rotate(40deg);
    			}
    			.xhr_hair_2{
    				left: 95px;
    				top: 70px;
    				transform: rotate(50deg);
    			}
    			
    			/*手臂*/
    			.xhr_hand_l,.xhr_hand_r{
    				width: 100px;
    				height: 100px;
    				border: 5px solid #000;
    				position: absolute;
    				z-index: -2;
    				border-radius: 30px;
    				background: yellow;
    			}
    			.xhr_hand_l{
    				left: 50px;
    				top: 50%;
    				transform: rotate(30deg);
    			}
    			.xhr_hand_r{
    				right: 50px;
    				top: 50%;
    				transform: rotate(-30deg);
    			}
    			.xhr_hand_l::after,.xhr_hand_r::after{
    				content: " ";
    				width: 50px;
    				height: 13px;
    				background-color: #000;
    				position: absolute;
    				border-radius: 5px;
    			}
    			.xhr_hand_l::after{
    				left: -2px;
    				top: 55px;
    				transform: rotate(-100deg);
    			}
    			.xhr_hand_r::after{
    				right: -2px;
    				top: 55px;
    				transform: rotate(100deg);
    			}
    			
    			/*腿脚*/
    			.xhr_footer_l,.xhr_footer_r{
    				width: 40px;
    				height: 65px;
    				background-color: #000;
    				position: absolute;
    				z-index: -22;
    			}
    			.xhr_footer_l{
    				left: 156px;
    				/*transform: translate(-20px);*/
    				bottom: 44px;
    			}
    			.xhr_footer_r{
    				right: 156px;
    				/*transform: translate(-20px);*/
    				bottom: 44px;
    			}
    			.xhr_footer_l::before,.xhr_footer_r::after{
    				content: " ";
    				width: 55px;
    				height: 40px;
    				background-color: #000;
    				position: absolute;
    				border-radius: 20px; 
    			}
    			.xhr_footer_l::before{
    				left: -40px;
    				top: 25px;
    			}
    			.xhr_footer_r::after{
    				right: -40px;
    				top: 25px;
    			}
    			
    			/*眼镜 */
    			.xhr_eyes{
    				/*width: 100%;
    				height: 100px;*/
    				/*border: 1px solid red;*/
    				position: absolute;
    				top: 60px;
    				left: 24px;/*身体的宽度-眼镜的宽度，然后让它居中，两边剩下50px，居中*/
    			}
    			.xhr_eyes_l,.xhr_eyes_r{
    				width: 90px;
    				height: 90px;
    				border: 5px solid #000;
    				border-radius: 50%;
    				background-color: #fff;
    				float: left;
    			}
    			.xhr_eyes_l::before,.xhr_eyes_r::after{
    				content: " ";
    				width: 30px;
    				height: 20px;
    				position: absolute;
    				background-color: #000;
    			}
    			.xhr_eyes_l::before{
    				left: -26px;
    				top: 38px;
    				transform: rotate(15deg);
    			}
    			.xhr_eyes_r::after{
    				right: -26px;
    				top: 38px;
    				transform: rotate(-15deg);
    			}
    			/*眼睛*/
    			.xhr_l_black,.xhr_r_black{
    				width: 55px;
    				height: 50px;
    				background-color: #000;
    				border-radius:50%; 
    				position: absolute;
    				top: 25px;
    				/*left: 3px;*/
    			}
    			.xhr_eyes_l .xhr_l_black{
    				left: 8px;
    			}
    			.xhr_eyes_r .xhr_r_black{
    				/*float: right;*/
    				right: 37px;
    			}
    			.xhr_l_white,.xhr_r_white{
    				width: 22px;
    				height: 22px;
    				background-color: #fff;
    				border-radius:50%; 
    				position: absolute;
    				top: 40px;
    			}
    			.xhr_eyes_l .xhr_l_white{
    				left: 35px;
    				 
    			}
    			.xhr_eyes_r .xhr_r_white{
    				right: 64px;
    			}
    			/*嘴巴*/
    			
    			.xhr_mouth{
    				width: 60px;
    				height: 35px;
    				border: 5px solid #000;
    				position: absolute;
    				border-radius: 0 0 0px 30px;
    				background-color: #fff;
    				left:  90px;
    				top: 180px;
    				transform: rotate(-30deg);
    			}
    			.xhr_mouth::after{
    				content: " ";
    				width: 81px;
    				height: 40px;
    				background-color: yellow;
    				position: absolute;
    				border-bottom: 5px solid #000;
    				left: 0px;
    				top:  -22px;
    				transform: rotate(30deg);
    			}
    			
    			
    			/*裤子*/
    			.xhr_trousers{
    				position: absolute;
    				top:290px;
    			}
    			.xhr_trousers_t{
    				width: 150px;
    				height: 50px;
    				background: blue;
    				border:5px solid #000;
    				border-bottom: none;/*去掉边框，就和裤子连上了。*/
    				position: absolute;
    				left: 45px;
    				top:-40px;
    				z-index:999;
    			}
    			.xhr_trousers_b{
    				width: 240px;
    				height: 94px;
    				background: blue;
    				border: 5px solid #000;
    				position: absolute;
    				top: 10px;
    		
    			}
    			
    			
    			/*肩带*/
    			.t_l_belt,.t_r_belt{
    				width: 100px;
    				height: 20px;
    				background: blue;
    				border: 5px solid #000;
    				position: absolute;
    			}
    			.t_l_belt{
    				left: -79px;
    		    	top: -20px;
    				transform: rotate(30deg);
    			}
    			.t_r_belt{
    				right: -79px;
    		    	top: -20px;
    				transform: rotate(-30deg);
    			}
    			.t_l_belt::after,.t_r_belt::after{
    				content: "";
    				width:10px;
    				height: 10px;
    				background: #000;
    				border-radius: 50%;
    				position: absolute;
    			}
    			.t_l_belt::after{
    				left: 82px;
    		    	top: 5px;
    				
    			}
    		
    			.t_r_belt::after{
    				left: 10px;
    				top:5px;
    			}
    			
    			/*头发动画*/
    			.xhr_hair_1,.xhr_hair_2{
    				animation: hair 5s ease-in infinite;
    			}
    			@keyframes hair {
    				10%{transform: rotate(43deg);  }
    				20% {transform: rotate(48deg) ; }
    				50%{transform: rotate(50deg);  }
    				80% {transform: rotate(43deg) ; }
    				90%{transform: rotate(50deg);  }
    				
    			}
    			
    			/*眼睛动画*/
    			.xhr_r_black,.xhr_l_black{
    				animation: eyse 5s ease-in infinite;
    			}
    		   @keyframes eyse {
    					10%,50%,60%,100%{
    						transform: translate(0);
    		         	}
    					30%,40%{
    						transform: translate(15px);
    					}
    					70%,80%{
    						transform: translate(5px);
    					}
    					
    			}
    			.xhr_l_white,.xhr_r_white{
    				animation: whiteEyes 5s ease-in infinite;
    			}
    			
    			@keyframes whiteEyes{
    				10%,50%,60%,100%{
    					transform: translate(0);
    				}
    				30%,40%{
    					transform: translate(15px,4px);
    				}
    				70%,80%{
    					transform: translate(5px,4px);
    				}
    			}
    		</style>

最后是这样的效果[https://codepen.io/iyouu/pen/MdgGZM][https_codepen.io_iyouu_pen_MdgGZM]![小黄人][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70]  
注意定位的时候位置的设置，设置动画的时候要想好怎么动，眼睛和眼球动的次数是一样的。还有该demo没兼容ie8，9以下版本。

[https_codepen.io_iyouu_pen_MdgGZM]: https://codepen.io/iyouu/pen/MdgGZM
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70]: /images/20220215/71d4cc7d69ea40748c3998e3d86f672a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 css写一个三角形

昨天面试了一个听起来很简单的问题，但是真的很久没有用到了，所以我都搞忘记了如何实现，哎，万万不可忘记很多基础的东西啊，说不定哪天就遇到了！。。 <div class=

川长思鸟来/ 2023年07月12日 14:51/ 0 赞/ 33 阅读

相关 css写一个计算器叭

显示效果如图，emoji可替换为数字。 ![Image 1][] 代码是这样的：因为不是很难（因为我很懒），就不多加说明了，具体参考代码 <!DOCTYPE

野性酷女/ 2023年06月05日 08:10/ 0 赞/ 7 阅读

相关 python画小黄人

import turtle as t t.pensize(4) t.speed(10) def head():

Love The Way You Lie/ 2023年02月14日 03:06/ 0 赞/ 23 阅读

相关眼睛跟随鼠标转动的小黄人 html+css+js

先上效果（完整代码在最后）： ![在这里插入图片描述][20210328172213845.gif_pic_center] 实现过程（可跟着一步一步书写）： 1.

谁践踏了优雅/ 2022年11月14日 10:17/ 0 赞/ 268 阅读

相关一个人如何完成一个小程序？

点击蓝色“java大数据修炼之道”关注我哟加个“星标”，每晚21:00，一起学技术作者：杨小伟原文：https://www.cnb

迷南。/ 2022年10月10日 01:59/ 0 赞/ 222 阅读

相关小绿人小红人和小黄人

（2016/4/14 看了昨天的锵锵三人行继续谈王小波，子东提到一个有趣的观点，路遥和王小波的对比，一个返乡农村青年为成为城市人的奋斗，一个下放青年以普通人的姿态谈自由。两位都

系统管理员/ 2022年07月28日 11:44/ 0 赞/ 412 阅读

相关小黄人的制作

[点击打开链接][Link 1]1、用样条曲线对小黄人各种轮廓进行勾勒 ![1430112976926904.jpg][] 2、将主体轮廓外表面的草图投影过来 ![143

约定不等于承诺〃/ 2022年06月08日 03:56/ 0 赞/ 181 阅读

相关 ofo小黄跑路，中国人素质真的差吗？

昨天早上还能骑的小黄，晚上就提示一定要缴纳199元押金了。这不明显和之前天津的那家小蓝单车圈钱跑路的套路一模一样吗？常话说，骗我一次可以但绝对不能再骗我第二次！！！搜索了一

悠悠/ 2022年05月22日 04:40/ 0 赞/ 162 阅读

相关 css写一个小黄人

小黄人实现思想： 1、用一个容器装小黄人，样式定位为相对定位：`<div class="wrap"></div>` 2、把整个小黄人的身体做出来，然后添加头发；

末蓝、/ 2022年02月15日 14:51/ 0 赞/ 226 阅读

相关 css写一个步骤条

效果图代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv

ゞ浴缸里的玫瑰/ 2022年01月19日 23:29/ 0 赞/ 339 阅读