css案例:小黄人案例
- 先看效果图
眼睛和嘴巴有做动画的,但是我懒得上传gif了。
3. 源码 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.contain {
width: 400px;
height: 600px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
z-index: -2;
background-color: pink;
}
.body {
width: 250px;
height: 400px;
background-color: #FBF404;
border: 5px solid #000;
border-radius: 120px;
box-shadow: 6px 0px 6px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.hair_l,
.hair_r {
width: 130px;
height: 100px;
border-top: 10px solid #000;
border-radius:50%;
position: absolute;
transform: rotate(48deg);
z-index: -1;
}
.hair_l {
top: 89px;
left: 98px;
}
.hair_r {
top: 80px;
left: 99px;
}
.eyes {
width: 100%;
height: 100px;
position: absolute;
top: 75px;
overflow: hidden;
}
.eyes::before {
content: "";
width: 60px;
height: 20px;
background-color: #000;
position: absolute;
top: 31px;
left: -15px;
transform: rotate(25deg);
}
.eyes::after {
content: "";
width: 60px;
height: 20px;
background-color: #000;
position: absolute;
top: 31px;
right: -15px;
transform: rotate(-25deg);
}
.eyes .eyes_l,
.eyes .eyes_r {
width: 90px;
height: 90px;
border-radius: 50%;
border: 5px solid #000;
position: absolute;
background-color: #fff;
z-index: 999;
}
.eyes .eyes_l {
left: 25px;
}
.eyes .eyes_r {
right: 25px;
}
.eyes .eyes_l .black_l,
.eyes .eyes_r .black_r {
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
}
.eyes .eyes_l .black_l .white_l,
.eyes .eyes_r .black_r .white_r {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 15px;
}
.eyes .eyes_l .black_l .white_l {
left: 23px;
}
.eyes .eyes_r .black_r .white_r {
left: 6px;
}
.mouth {
width: 80px;
height: 40px;
background-color: #fff;
position: absolute;
border: 5px solid #000;
top: 190px;
left: 80px;
border-radius: 0 0 45px 45px;
}
.mouth::before {
content: "";
width: 5px;
height: 40px;
background-color: #000;
position: absolute;
left: 20px;
}
.mouth::after {
content: "";
width: 5px;
height: 40px;
background-color: #000;
position: absolute;
left: 52px;
}
.hand_l,
.hand_r {
width: 100px;
height: 100px;
border: 5px solid #000;
background-color: #FBF404;
border-radius: 24px;
position: absolute;
top: 300px;
z-index: -1;
}
.hand_l {
transform: rotate(45deg);
left:50px;
}
.hand_r {
transform: rotate(-45deg);
right: 50px;
}
.hand_l::after,
.hand_r::after {
content: "";
width: 20px;
height: 20px;
background-color: #000;
border-radius: 7px;
position: absolute;
top: 64px;
}
.hand_l::after {
left: 18px;
}
.hand_r::after {
right: 18px;
}
.clothes {
width: 260px;
height: 140px;
position: absolute;
bottom: 0;
left: -5px;
}
.clothes .clothes_jl {
content: "";
width: 110px;
height: 15px;
border: 5px dashed #000;
background-color: blue;
position: absolute;
top:-15px;
left: -22px;
z-index: 2;
transform: rotate(24deg);
}
.clothes .clothes_jr {
content: "";
width: 110px;
height: 15px;
border: 5px dashed #000;
background-color: blue;
position: absolute;
top:-15px;
right: -22px;
z-index: 2;
transform: rotate(-24deg);
}
.clothes .clothes_jl::after {
content: "";
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 2px;
right: 3px;
}
.clothes .clothes_jr::after {
content: "";
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 2px;
left: 3px;
}
.clothes .clothes_t {
width: 100px;
height: 40px;
background-color: blue;
border: 5px dashed #000;
border-bottom: 0;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
}
.clothes .clothes_b {
width: 100%;
height: 100px;
background-color: blue;
border: 5px dashed #000;
position: absolute;
bottom: -10px;
}
.clothes .clothes_k {
width: 80px;
height: 50px;
background-color: blue;
border-radius: 0 0 25px 25px;
border: 3px dashed #000;
position: absolute;
top: 60px;
left: 88px;
}
.clothes .clothes_k .clothes_k_y {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #000;
border: 2px dashed #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.clothes .clothes_k .clothes_k_y::after {
content: "";
width: 20px;
height: 20px;
background-color: blue;
border: 2px solid #000;
position: absolute;
top: 3px;
left: 3px;
transform: rotate(45deg);
}
.clothes .clothes_k .clothes_k_y::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
}
.foot .foot_l,
.foot .foot_r {
width: 30px;
height: 80px;
background-color: #000;
position: absolute;
bottom: 80px;
z-index: -1;
}
.foot .foot_l {
left: 165px;
}
.foot .foot_r {
left: 220px;
}
.foot .foot_l::after,
.foot .foot_r::after {
content: "";
width: 60px;
height: 30px;
background-color: #000;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
position: absolute;
bottom: -30px;
}
.foot .foot_l::after {
left: -30px;
border-radius: 15px 0 0 15px;
}
.foot .foot_r::after {
right: -30px;
border-radius: 0px 15px 15px 0px;
}
.eyes .black_l,
.eyes .black_r {
animation: black_eye 3s infinite;
}
@keyframes black_eye {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(18px, 0);
}
50% {
transform: translate(0px, 0);
}
75% {
transform: translate(-18px, 0);
}
100% {
transform: translate(0px, 0);
}
}
.eyes .black_l .white_l,
.eyes .black_r .white_r {
animation: white_eye 3s infinite;
}
@keyframes white_eye {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(0px, 5px);
}
50% {
transform: translate(0px, 0);
}
75% {
transform: translate(0px, -5px);
}
100% {
transform: translate(0px, 0);
}
}
.hand_l{
animation: hand_l_mov 3s linear infinite;
}
@keyframes hand_l_mov {
0% {
transform: rotate(45deg);
}
25% {
transform: rotate(52deg);
}
50% {
transform: rotate(45deg);
}
75% {
transform: rotate(52deg);
}
100% {
transform: rotate(45deg);
}
}
.hand_r{
animation: hand_r_mov 3s linear infinite;
}
@keyframes hand_r_mov {
0% {
transform: rotate(-45deg);
}
25% {
transform: rotate(-52deg);
}
50% {
transform: rotate(-45deg);
}
75% {
transform: rotate(-52deg);
}
100% {
transform: rotate(-45deg);
}
}
.hair_l,.hair_r {
animation: hair_mov 3s linear infinite;
}
@keyframes hair_mov {
0% {
transform: rotate(48deg);
}
25% {
transform: rotate(55deg);
}
50% {
transform: rotate(48deg);
}
75% {
transform: rotate(55deg);
}
100% {
transform: rotate(48deg);
}
}
.mouth {
animation: mouth_mov 1s linear infinite;
}
@keyframes mouth_mov {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(0px, 5px);
}
50% {
transform: translate(0px, 0);
}
75% {
transform: translate(0px, -5px);
}
100% {
transform: translate(0px, 0);
}
}
</style>
</head>
<body>
<div class="contain">
<div class="body">
<div class="eyes">
<div class="eyes_l">
<div class="black_l">
<div class="white_l"> </div>
</div>
</div>
<div class="eyes_r">
<div class="black_r">
<div class="white_r"> </div>
</div>
</div>
</div>
<div class="mouth"> </div>
<div class="clothes">
<div class="clothes_t"></div>
<div class="clothes_b"></div>
<div class="clothes_k">
<div class="clothes_k_y">
</div>
</div>
<div class="clothes_jl"></div>
<div class="clothes_jr"></div>
</div>
</div>
<div class="hair">
<div class="hair_l"></div>
<div class="hair_r"></div>
</div>
<div class="hand">
<div class="hand_l"></div>
<div class="hand_r"></div>
</div>
<div class="foot">
<div class="foot_l">
</div>
<div class="foot_r">
</div>
</div>
</div>
</body>
</html>