标签：css3 QQ color 50% height width LOGO left penguin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ Penguin</title>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.penguin {
width: 100px;
height: 150px;
position: relative;
}
.penguin .head {
width: 60px;
height: 60px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 0;
left: 20px;
z-index: 2;
}
.penguin .body {
width: 80px;
height: 100px;
background-color: black;
border-radius: 0 0 50% 50%;
position: absolute;
top: 40px;
left: 10px;
z-index: 1;
}
.penguin .scarf {
width: 80px;
height: 20px;
background-color: red;
position: absolute;
top: 60px;
left: 10px;
z-index: 3;
}
.penguin .eye-left, .penguin .eye-right {
width: 15px;
height: 15px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 20px;
z-index: 3;
}
.penguin .eye-left {
left: 25px;
}
.penguin .eye-right {
left: 40px;
}
.penguin .pupil-left, .penguin .pupil-right {
width: 5px;
height: 5px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 25px;
z-index: 4;
}
.penguin .pupil-left {
left: 30px;
}
.penguin .pupil-right {
left: 45px;
}
.penguin .beak {
width: 20px;
height: 20px;
background-color: orange;
border-radius: 0 0 50% 50% / 0 0 100% 100%; /* Adjust beak curve */
transform: rotate(-15deg); /* Slightly tilt the beak */
position: absolute;
top: 35px;
left: 30px;
z-index: 3;
}
.penguin .foot-left, .penguin .foot-right {
width: 20px;
height: 10px;
background-color: orange;
border-radius: 50% 50% 0 0;
position: absolute;
bottom: 0;
z-index: 1;
}
.penguin .foot-left {
left: 10px;
transform: rotate(-15deg);
}
.penguin .foot-right {
left: 60px;
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="penguin">
<div class="head"></div>
<div class="body"></div>
<div class="scarf"></div>
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="pupil-left"></div>
<div class="pupil-right"></div>
<div class="beak"></div>
<div class="foot-left"></div>
标签：css3,
QQ,
color,
50%,
height,
width,
LOGO,
left,
penguin
From： https://www.cnblogs.com/ai888/p/18580892