纯css3实现哆啦a梦
哆啦a梦身体的各个部位主要由border-radius来实现的
效果图如下：
代码附上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哆啦a梦</title>
<style>
body {
margin: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.box {
position: relative;
display: flex;
width: 300px;
height: 400px;
}
.box div {
position: absolute;
background-color: #fff;
border: 2px solid black;
}
.box .header {
position: absolute;
top: 5%;
left: 15%;
width: 70%;
height: 48%;
border-radius: 50%;
background: #3AA0E8;
z-index: 130;
}
.header .inside {
position: absolute;
top: 13%;
left: 4%;
width: 90%;
height: 82%;
border-radius: 50%;
z-index: 8;
}
.inside .mouth {
top: 50%;
left: 10%;
width: 79%;
height: 35%;
border-radius: 0 0 50% 50%/0 0 100% 100%;
border-top: none;
}
.inside .beard {
width: 28%;
border: 1px solid black;
}
.inside .beard-1 {
top: 40px;
left: 18px;
transform: rotate(10deg);
}
.inside .beard-2 {
top: 60px;
left: 13px;
transform: rotate(-2deg);
}
.inside .beard-3 {
top: 83px;
left: 14px;
transform: rotate(-16deg);
}
.inside .beard-4 {
top: 40px;
right: 16px;
transform: rotate(-14deg);
}
.inside .beard-5 {
top: 60px;
right: 13px;
transform: rotate(0deg);
}
.inside .beard-6 {
top: 83px;
right: 12px;
transform: rotate(18deg);
}
.header .nose {
top: 25%;
left: 43%;
width: 14%;
height: 16%;
border: 2px solid black;
background: #E83731;
border-radius: 50%;
z-index: 11;
}
.header .nose::after {
position: absolute;
content: "";
top: 18%;
left: 18%;
width: 30%;
height: 30%;
background: #fff;
border-radius: 50%;
}
.header .nose::before {
position: absolute;
content: "";
top: 108%;
left: 48%;
width: 4%;
height: 250%;
background: black;
}
.eye {
width: 18%;
height: 28%;
border-radius: 50%;
z-index: 11;
}
.eye-left {
left: 30%;
}
.eye::after {
position: absolute;
content: "";
bottom: 20%;
right: 10%;
width: 6%;
height: 14%;
border: 5px solid black;
border-radius: 50%;
}
.eye-right {
right: 30%;
}
.eye-right::after {
left: 10%;
}
.box .body {
top: 48%;
left: 23%;
width: 54%;
height: 34%;
border-radius: 3% 1% 15% 16%/3% 1% 77% 95%;
z-index: 300;
background: #3AA0E8;
border: 2px solid transparent
}
.body .trousers-line-1 {
bottom: 10%;
left: 40%;
width: 20%;
border: 1px solid black;
z-index: 300;
}
.body .trousers-line-2 {
bottom: 0%;
left: 50%;
height: 10%;
border: 1px solid black;
z-index: 300;
}
.body .trousers-line-3 {
bottom: -1%;
left: -1%;
height: 62%;
width: 100%;
background: #3AA0E8;
border-top: none;
border-radius: 3% 1% 15% 16%/3% 1% 77% 95%;
}
.box .hand-left {
left: 15%;
top: 40%;
width: 14%;
height: 20%;
background: #3AA0E8;
border-radius: 42% 58% 3% 83% / 53% 6% 95% 66%;
z-index: 299;
transform: rotate(19deg);
}
.box .hand-left::after {
position: absolute;
content: "";
top: -47%;
left: 10%;
width: 106%;
height: 54%;
border: 2px solid black;
background: #fff;
border-radius: 50%;
}
.box .hand-right {
right: 14%;
top: 47%;
width: 15%;
height: 23%;
background: #3AA0E8;
transform: rotate(-30deg);
border-radius: 17% 83% 27% 73% / 44% 44% 56% 56%;
}
.box .hand-right::after {
position: absolute;
content: "";
bottom: -35%;
left: 10%;
width: 96%;
height: 45%;
border: 2px solid black;
background: #fff;
border-radius: 50%;
}
.body .necktie {
top:-1%;
left:11%;
height: 6%;
width: 91%;
background: #E83731;
border-radius: 4px;
position: absolute;
z-index: 201;
border: 1px solid black;
}
.body .clothes {
top: 1%;
left: 5%;
height: 86%;
width: 90%;
border-radius: 50%;
z-index: 2;
}
.body .bell {
top: 1%;
left: 40%;
height: 26%;
width: 24%;
border-radius: 50%;
background: #F8D549;
z-index: 300;
}
.box .bell::after {
position: absolute;
content: "";
top: 22%;
width: 96%;
height: 5%;
border: 2px solid black;
border-radius: 2px;
}
.box .bell::before {
position: absolute;
content: "";
bottom: 22%;
left: 40%;
width: 18%;
height: 20%;
background: #886C65;
border: 1px solid black;
border-radius: 50%;
}
.body .bag {
top: 43%;
left: 8%;
height: 44%;
width: 81%;
border-radius: 0 0 100px 100px;
}
.box .foot-left {
bottom: 9%;
left: 21%;
width: 29%;
height: 10%;
border-radius: 90% 60% 40% 30% / 82% 0% 80% 74%;
}
.box .foot-right {
bottom: 9%;
right: 20%;
width: 28%;
height: 10%;
border-radius: 7% 83% 27% 43% / 4% 44% 56% 53%;
}
</style>
<div class="box">
<div class="header">
<div class="inside">
<div class='mouth'></div>
<div class="beard beard-1"></div>
<div class="beard beard-2"></div>
<div class="beard beard-3"></div>
<div class="beard beard-4"></div>
<div class="beard beard-5"></div>
<div class="beard beard-6"></div>
</div>
<div class="eye eye-left"></div>
<div class="eye eye-right"></div>
<div class='nose'></div>
</div>
<div class="body">
<div class="necktie"></div>
<div class="bell"></div>
<div class="clothes">
<div class="bag"></div>
</div>
<div class='trousers-line-1'></div>
<div class='trousers-line-2'></div>
<div class='trousers-line-3'></div>
</div>
<div class="hand-left"></div>
<div class="hand-right"></div>
<div class="foot-left"></div>
<div class="foot-right"></div>
</div>
</body>
</html>
