表情包——爱你哦
<!--定死视窗大小-->
<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);
}