这篇博客通过CSS定位技术详细展示了如何创建哆啦A梦的面部特征，包括圆形头部、眼睛、鼻子和嘴巴。使用了相对和绝对定位、不同元素的大小和颜色设置，以及模糊效果来实现哆啦A梦形象的视觉效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>哆啦A梦</title>
<style>
*{
padding: 0;
margin: 0;
}
.head{
width: 350px;
height: 350px;
border-radius:50%;
background-color: pink;
margin:100px auto;
position: relative；
}
.head div{
position:absolute;
}
.eye{
height:90px;
width:80px;
background-color: #fff;
border-radius:50%;
border:2px solid #111;
left:90px;
top:50px;
z-index:1;
}
.eye div{
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #111;
}
.eye1 div{
left:50px;
bottom:30px;
z-index:2；
}
.eye2{
left:174px;
}
.eye2 div{
right:50px;
bottom:30px;
}
.face{
height:220px;
width:308px;
border-radius:120px;
background-color: #fff;
bottom:36px;
left:20px;
}
.nose{
width: 40px;
height: 40px;
border-radius:50%;
background-color: red;
border:2px solid;
left:152px;
top:127px;
}
.nose div{
height:14px;
width: 14px;
background-color:white;
border-radius: 50%;
left:25px;
top:12px;
filter: blur(3px);
}
.mouth{
width: 252px;
height: 252px;
border-radius: 50%;
background-color: transparent;
left:50px;
top:20px;
border-bottom: 5px solid #111;
}
.mouth div{
height:102px;
width: 5px;
background-color: #111;
left:122px;
bottom:0px;
}
</style>
</head>
<body>
<div class="head">
<div class="eye eye1"><div></div></div>
<div class="eye eye2"><div></div></div>
<div class="face"></div>
<div class="nose"><div></div></div>
<div class="mouth"><div></div></div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
