CSS画卡通人物：皮卡丘

最新推荐文章于 2023-06-30 15:55:48 发布

吃素的黑猫

最新推荐文章于 2023-06-30 15:55:48 发布

阅读量1.9k

点赞数

分类专栏： web开发——作品文章标签： css html css3 html5

本文链接：https://blog.csdn.net/qq_44645934/article/details/105486684

版权

web开发——作品专栏收录该内容

10 篇文章 0 订阅

订阅专栏

皮卡丘

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Pikachu</title>
		<link rel="stylesheet" href="css/Pikachu.css" />
	</head>
	<body>
		 <div class="wrapper">
		 	<div class="nose"></div>
		 	<div class="eye left"></div>
		 	<div class="eye right"></div>
		 	<div class="face left"></div>
		 	<div class="face right"></div>
		 	<div class="lip left"></div>
		 	<div class="lip right"></div>
		 	<div class="lowerlip">
		 		<div class="mouth"></div>
		 	</div>
		 	
		 </div>
			
	</body>
</html>


*{
	margin: 0;
	padding:0;
	box-sizing: border-box;
}
*::after{
	box-sizing:border-box;
}
*::before{
	box-sizing:border-box;
}
body{
	height: 100vh;
	border:1px solid green;
	display: flex;
	justify-content: center;
    align-items:center;
    background-color:#FEE433;
}
.wrapper{
	width: 400px;
	height: 320px;
	position: absolute;
}
.nose{
	width: 0px;
	height:0px;
	border: 13px solid;
	border-radius: 50%;
	border-color:black transparent transparent;
	position: relative;
	left:50%;
	top: 25%;
	transform: translateX(-50%); 
}
.eye{
	width: 50px;
	height: 50px;
	border-radius:50% ;
	background-color: #2E2E2E;
	border: 5px solid black;
	float: left;
	position: absolute;
}
.eye::before{
	content: "";
	display:block;
	width: 20px;
	height: 20px;
	border-radius:50%;
	background-color:white ;
	transform: translateX(2px) translateY(-1px);
}
.eye.left{
	position: relative;
	left:25%;
	transform: translateX(-50%) translateY(50%);
}
.eye.right{
	position: relative;
	left:50%;
	transform: translateX(50%) translateY(50%);
}
.face{
	width: 80px;
	height: 80px;
	border:2px solid red;
	border-radius:50% ;
	background-color: #FC0D1C;
	position: absolute;
    top:0;
    left:0;

}
.face.left{
	position:relative;
	top:60%;
	left: 15%;
	 transform: translateX(-50%) translateY(-50%);
}
.face.right{
	position:relative;
	top:60%;
	left: 85%;
	transform: translateX(-50%) translateY(-150%);
}
.lip{
	width: 80px;
	height: 24px;
	border:4px solid black;
	background-color:#FEE433;
	z-index: 1;
	position:absolute;
	top:40%;
	left:50%;
}
.lip.left{
	border-bottom-left-radius:50% 100%;
	border-top:none ;
	border-right: none;
	transform: translateX(-100%) translateY(-7px) rotate(-30deg) translateX(2px);
	
}
.lip.right{
	border-bottom-right-radius:50% 100%;
	border-top:none;
	border-left: none;
	transform: translateX(-2px) translateY(-7px) rotate(30deg);
}
.mouth{
	width: 100px;
	height: 480px;
	border:1px solid red;
	border-radius: 50% ;
	background-color:#990513 ;
	position:absolute ;
	top: -30%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
	overflow: hidden;
}
.lowerlip{
	width: 280px;
	height: 200px;
	position:absolute ;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-18%);
	overflow: hidden;
}
.mouth::after{
	content: " ";
	display: block;
	width:150px;
	height: 150px;
	border-radius:50% ;
	background-color:#FC4A62 ;
    position: relative;
    top: 90%;
    transform:  translateX(-25px) translateY(-65%);

}

吃素的黑猫

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS画卡通人物：皮卡丘

皮卡丘<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Pikachu</title> <link rel="stylesheet" href="css/Pikachu.css" /> </head> ...
复制链接

扫一扫

专栏目录