表情包——爱你哦

最新推荐文章于 2021-08-06 16:04:23 发布

吃素的黑猫

最新推荐文章于 2021-08-06 16:04:23 发布

阅读量606

点赞数

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

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

版权

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

10 篇文章 0 订阅

订阅专栏

表情包——爱你哦

<meta name="viewport" content="width=750 ,user-scalable=no" />

1.现将表情包划分为：头，身体，脚三个部分。

2.设计头部时用border边框样式，position定位，transform变换。

3.设计眼睛，爱心时用animation动画。

4.胡须，爱心，腰用到了before和after伪类。

5.脚用到了display：flex弹性盒子。

6.文字爱你哦用到了filter: hue-rotate(0deg);

滤镜属性 hue-rotate 色相旋转:角度，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>爱你哦</title>
		<meta name="viewport" content="width=750 ,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/爱你哦.css"/>  
	</head>
	<body>
		<div class="panda">
			<!--<div class="heart"></div>-->
			<div class="head">
				<div class="ears left-ears"></div>
				<div class="ears right-ears"></div>
				<div class="eye left-eye"></div>
				<div class="eye  right-eye"></div>
				<div class="mouth"></div>
				<div class="cheek left-cheek"></div>
				<div class="cheek right-cheek"></div>
			</div>
			<div class="body">
				<div class="heart"></div>
				<div class="hands left-hands"></div>
				<div class="hands right-hands"></div>
				<div class="pockets">
					<span>爱你哦</span>
				</div>
			</div>
			<div class="foot">
				<div class="left-foot"></div>
				<div class="right-foot"></div>
			</div>
		</div>
	 
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
body{
	width:750px;
	height: 100vh;
	position: absolute;
}
.panda{
	margin: 100px auto;
	width: 80%;
	height: 80%;
	/*border: 2px solid red;*/
	animation: move 3s linear infinite;
}
@keyframes move{
	0%,100%{
		transform: translateY(0px);
	}
	25%{
		transform: translateY(-8px);
	}
	50%{
		transform: translateY(0px);
	}
	75%{
		transform: translateY(8px);
	}
}

/*头部样式*/
.panda .head{
	width: 300px;
	height: 250px;
	border: 4px solid brown;
	border-radius:50% 50% 25% 25%;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.panda .head .ears{
	width: 50px;
	height: 40px;
	/*border: 2px solid red;*/
	border-radius: 50% 50% 10% 10%;
	background-color:brown ;
}
.panda .head .left-ears{
	z-index: -1000;
	float: left;
    transform: translateY(10px) rotate(-45deg);
}
.panda .head .right-ears{
	float: right;
	transform: translateY(10px) rotate(45deg);
}
.panda .head .right-ears:after{
	content: "";
	clear: both;
}
.panda .head .eye{
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: black;
	position: absolute;
	top: 150px;
	animation: eye-scal 2s linear infinite;
}
@keyframes eye-scal{
    0%,100%{
		transform: translate(-50%, -50%)  scaleY(1);
	}
	25%{
		transform: translate(-50%, -50%)  scaleY(0.7);
	}
	50%{
		transform: translate(-50%, -50%)  scaleY(1);
	}
	75%{
		transform: translate(-50%, -50%)  scaleY(0.7);
	}	
}
.panda .head .left-eye{
	left: 100px;
}
.panda .head .right-eye{
	left: 200px;
}

.panda .head .mouth{
	width: 20px;
	height: 25px;
	border: 2px solid brown;
	border-radius:50% ;
	background-color: hotpink;
	position: absolute;
	top:175px;
	left: 50%;
	transform: translate(-50%,-50%);
}
.panda .head .mouth:before{
	content:"";
	display: inline-block;
	width: 20px;
	height: 10px;
	border:3px solid brown ;
	border-color:transparent  transparent brown brown; 
	border-radius:50% ;
	transform: translate(-13px,-13px) rotate(-30deg);
	
}
.panda .head .mouth:after{
	content:"";
	display: inline-block;
	width: 20px;
	height: 10px;
	border:3px solid brown ;
	border-color:transparent  brown brown transparent; 
	border-radius:50% ;
	transform: translate(8px,-33px) rotate(30deg);
	
}
.panda .head .cheek{
	width: 50px;
	height: 50px;
	/*border: 2px solid brown;*/
	border-radius:50% ;
	background-color: lightpink;
	position: absolute;
	top:200px;
	transform: translate(-50%,-50%);
}
.panda .head .left-cheek{
	left: 60px;
}
.panda .head .right-cheek{
	left: 240px;
}

/*身体样式*/
.panda .body{
	width: 240px;
	height: 200px;
	border: 4px solid transparent;
	border-radius:40% 40% 5% 5% ;
	position: absolute;
	top: calc(40% + 200px);
	left: 50%;
	transform: translate(-50%,-50%);
}
.panda .body:before{
	content: "";
	width: 0px;
	height: 116px;
	border:2px solid brown ;
	position: absolute;
	top: 80px;
	left: -4px;
}
.panda .body:after{
	content: "";
	width: 0px;
	height: 116px;
	border:2px solid brown ;
	position: absolute;
	top: 80px;
	left: 240px;
}
/*爱心*/
.panda .body .heart{
	width: 100px;
	height: 100px;
	background-color: pink;
	/*border-radius:40% ;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-70%) rotate(45deg);
	/*z-index: 10;*/
	animation: heart-scal 2s linear infinite;
}
@keyframes heart-scal{
	0%,100%{
		transform: translate(-50%,-70%) rotate(45deg) scale(1);
	}
	25%{
		transform: translate(-50%,-70%) rotate(45deg)  scale(0.7);
	}
	50%{
		transform: translate(-50%,-70%) rotate(45deg)  scale(1);
	}
	75%{
		transform:translate(-50%,-70%) rotate(45deg)  scale(0.7);
	}	
}
.panda .body .heart:before{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	border-radius:50% ;
	background-color: pink;
	transform: translate(0px,-50px);
}
.panda .body .heart:after{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	border-radius:50% ;
	background-color: pink;
	transform: translate(-50px,-100px);
}
.panda .body .hands{
	width: 75px;
	height: 85px;
	border:4px solid;
	border-radius:50% ;
	background-color:transparent;
	z-index: 100;
}
.panda .body .left-hands{
	border-color:brown transparent  transparent brown;
	float: left;
	transform: translate(-4px,18px) rotate(-60deg);
	/*background:linear-gradient(to top, transparent 100%, white 0%);*/
}
.panda .body .left-hands:after{
	clear: both;
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 4px solid brown;
	border-radius:50% ;
	border-color:brown brown transparent transparent  ;
	transform: translate(2px,35px) rotate(105deg);
}
.panda .body .right-hands{
	border-color:brown brown transparent  transparent ;
	float: right;
	transform: translate(4px,18px) rotate(60deg);
	/*background:linear-gradient(to right, transparent 80%, white 0%);*/
}
.panda .body .right-hands:after{
	clear: both;
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 4px solid brown;
	border-radius:50% ;
	border-color:transparent transparent brown brown  ;
	transform: translate(25px,35px) rotate(-15deg);
}
.panda .body .pockets{
	width: 140px;
	height: 140px;
	border: 4px solid brown;
	border-color:transparent  transparent brown brown; 
	border-radius:45% 50% 45% 50% ;
	position: absolute;
	top:60%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(-45deg);
	z-index: -100;
}
.panda .body .pockets span{
	display: block;
	width: 140px;
	height: 30px;
    /*border: 2px solid red;
    border-radius:50% ;*/
	font-family: "微软雅黑";
	font-size: x-large;
	text-align: center;
	color: pink;
	transform: rotate(45deg) translate(20px,65px);
	animation: color 2s linear infinite;
}
@keyframes color{
	0%{
		filter: hue-rotate(0deg);
	}
	100%{
		filter: hue-rotate(360deg);
	}
}
.panda .body .pockets:before{
	content: "";
	display: inline-block;
	width: 144px;
	height: 0px;
	border: 2px solid brown;
	transform: rotate(45deg) translate(36px,44px);
}
/*脚*/
.panda  .foot{
	width: 280px;
	height: 60px;
	/*border: 4px solid brown;*/
	position: absolute;
	top: calc(40% + 320px);
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
}
.panda  .foot .left-foot{
	width: 130px;
	height: 50px;
	border:4px solid brown ;
	border-color:transparent brown brown brown;  
	border-radius:50% ;
	transform: translate(5px , -5px);
	
}
.panda  .foot .right-foot{
	width: 130px;
	height: 50px;
	border:4px solid brown ;
	border-color:transparent brown brown brown;  
	border-radius:50% ;
	transform: translate(0px , -5px);
	
}

吃素的黑猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表情包——爱你哦

表情包——爱你哦 <meta name="viewport" content="width=750 ,user-scalable=no" />1.现将表情包划分为：头，身体，脚三个部分。2.设计头部时用border边框样式，position定位，transform变换。3.设计眼睛，爱心时用animation动画。4.胡须，爱心，腰用到了before和after伪类。5.脚用到了display：flex弹性盒子。...
复制链接

扫一扫