本帖最后由 bneo-B 于 2019-6-21 14:06 编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小黄人制作</title>
<!-- <link rel="stylesheet" type="text/css" href="./style.css"> -->
<style>
*{
margin:0px;
padding: 0px;
text-decoration: none;
list-style: none;
}
/* body{
background: #111;
} */
.wrap{
width:600px;
height: 600px;
background-size: cover;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
/*background: yellow;*/
}
.wrap::before, .wrap::after{
content: '';
border: 2px solid hsla(145, 90%, 35%, 0.603);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: -15px;
animation: borderClip 8s linear infinite;
}
.wrap::after{
animation-delay: -4s;
}
/*.wrap:hover::before, .wrap:hover::after{
animation-play-state: paused;
}*/
@keyframes borderClip{
0%,100%{
clip: rect(0px,630px,2px,0px);
}
25%{
clip: rect(0px,2px,630px,0px);
}
50%{
clip: rect(628px,630px,630px,0px);
}
75%{
clip: rect(0px,630px,630px,628px);
}
}
/*小黄人容器*/
.wrap_xhr{
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-color: yellow;
overflow: hidden;
}
/*小黄人头发*/
.xhr_hair{
}
.xhr_hair_1 ,.xhr_hair_2{
width: 130px;
height: 100px;
border-top:10px solid #000;
border-radius: 50%;
position: absolute;
}
.xhr_hair_1{
left: 100px;
top: 80px;
transform: rotate(50deg);
}
.xhr_hair_2{
left: 102px;
top: 70px;
transform: rotate(50deg);
}
/*小黄人手臂*/
.xhr_hand_l,.xhr_hand_r{
width: 100px;
height: 100px;
border: 5px solid #000;
position: absolute;
border-radius: 30px;
background: yellow;
z-index: -1;
}
.xhr_hand_l{
left:50px;
top: 300px;
transform: rotate(30deg);
}
.xhr_hand_r{
right: 50px;
top: 300px;
transform: rotate(-30deg);
}
.xhr_hand_l::after,.xhr_hand_r::after{
content: '';
width: 30px;
height: 10px;
background: #000;
position: absolute;
border-radius: 5px;
}
.xhr_hand_l::after{
left: 6px;
top: 60px;
transform: rotate(-90deg);
}
.xhr_hand_r::after{
right: 6px;
top: 60px;
transform: rotate(-90deg);
}
/*小黄人腿*/
.xhr_foot_l ,.xhr_foot_r{
width: 40px;
height: 70px;
background: #000;
position: absolute;
z-index: -1;
}
.xhr_foot_l{
left:157px;
top: 490px;
}
.xhr_foot_r{
right: 157px;
top: 490px;
}
.xhr_foot_l::after ,.xhr_foot_r::after{
content: '';
width: 60px;
height: 40px;
background: #000;
border-radius: 20px;
position: absolute;
}
.xhr_foot_l::after{
left:-40px;
top:30px;
}
.xhr_foot_r::after{
right: -40px;
top:30px;
}
/*小黄人眼睛*/
.xhr_eyes{
/* width: 100%;
height: 100px;*/
border:1px solid red;
position: absolute;
top: 60px;
left:24.5px;
}
/*眼睛*/
.xhr_eyes_l,.xhr_eyes_r{
width: 90px;
height: 90px;
border: 5PX solid #000;
border-radius: 50%;
background: #fff;
float: left;
}
.xhr_eyes_l::after,.xhr_eyes_r::after{
content: '';
width: 30px;
height: 20px;
position: absolute;
background: #000;
}
.xhr_eyes_l::after{
border-radius: 2px 4px 0px 2px;
left:-26px;
top:34px;
transform: rotate(17deg);
}
.xhr_eyes_r::after{
right: -26px;
top:34px;
transform: rotate(-17deg);
border-radius: 2px 2px 0px 0px;
}
/*制作眼珠*/
.xhr_l_black,.xhr_r_black{
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
position: absolute;
}
.xhr_l_black{
left: 25px;
top:25px;
}
.xhr_r_black{
right: 25px;
top:25px;
}
.xhr_l_white,.xhr_r_white{
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
}
.xhr_l_white{
left: 50px;
top:40px;
}
.xhr_r_white{
right: 50px;
top:40px;
}
/*小黄人嘴巴*/
.xhr_mouth{
width: 65px;
height: 35px;
border: 5px solid #000;
border-radius: 0 0 0 30px;
background: #fff;
position: absolute;
top: 182px;
left: 100px;
transform: rotate(-30deg);
/*z-index: -1;*/
}
.xhr_mouth::after{
content: '';
width: 87px;
height: 40px;
background: yellow;
border-bottom: 5px solid #000;
position: absolute;
left: -1px;
top:-22px;
transform: rotate(30deg);
/*z-index: 1;*/
border-radius: 5px;
}
/*裤子*/
.xhr_trousers{
width: 100%;
height:100px;
/*background: blue;*/
position: absolute;
top: 260px;
/* left: 81px;*/
/*border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;*/
/*border: 1px solid red;*/
}
.xhr_trousers_t{
width: 150px;
height: 50px;
background: blue;
border: 5px solid #000;
border-bottom: none;
position: absolute;
left: 45px;
z-index: 999;
}
.xhr_trousers_b{
width: 250px;
height: 86px;
border-top: 5px solid #000;
position: absolute;
top:95%;
left: 49.5%;
transform: translate(-50%,-50%);
border-radius: 0px 0px 125px 125px;
background-color: blue
/*z-index:2;*/
}
/*裤子肩带*/
.t_l_belt,.t_r_belt{
width: 100px;
height: 20px;
background: blue;
position: absolute;
border: 5px solid #000;
}
.t_l_belt{
left: -77px;
top: -35px;
transform: rotate(45deg);
}
.t_r_belt{
right: -77px;
top: -35px;
transform: rotate(-45deg);
}
.t_l_belt::after, .t_r_belt::after{
content: '';
width: 10px;
height: 10px;
position: absolute;
background: #000;
border-radius: 50%;
z-index: 999;
}
.t_l_belt::after{
right: 9px;
top:4px;
}
.t_r_belt::after{
left: 9px;
top: 4px;
}
</style>
</head>
<body>
<!-- 小黄人容器 -->
<div class="wrap">
<div class="wrap_xhr">
<!-- 小黄人头发 -->
<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="xhr_foot">
<div class="xhr_foot_l"></div>
<div class="xhr_foot_r"></div>
</div>
</div>
</div>
</body>
</html>
|
|
收藏
淘帖
踩
