纯css样式制作qq企鹅

最新推荐文章于 2022-03-04 13:31:28 发布

atom_hc

最新推荐文章于 2022-03-04 13:31:28 发布

阅读量532

点赞数

分类专栏： HTML、css

本文链接：https://blog.youkuaiyun.com/atom_hc/article/details/53509816

版权

HTML、css 专栏收录该内容

5 篇文章

订阅专栏

这里写图片描述
html代码部分：全部采用div制作

<body>
    <div id="tou"></div>
    <div id="w"></div>
    <div id="tou_eye_left"></div>
    <div id="tou_eye_right"></div>
    <div id="eye_left_in"></div>
    <div id="eye_right_in"></div>
    <div id="mouth"></div>
    <div id="mouth_bottom"></div>
    <div id="weibo"></div>
    <div id="weibo_left"></div>
    <div id="weibo1"></div>
    <div id="body1"></div>
    <div id="body_li"></div>
    <div id="hand_left"></div>
    <div id="hand_right"></div>
    <div id="footer_left"></div>
    <div id="footer_right"></div>       
</body>

CSS样式代码如下：
总的思路：设置border-radius、position位置、z-index让每个元素在合理的位置出现

*{margin:0;padding: 0;}
/头部容器/
#tou{
width: 340px;
height: 220px;
border:2px solid #000;
background-color: #000000;
border-radius: 220px 220px 70px 70px;
position: relative;
left:100px;
z-index: 1;
}
#w{
width: 340px;
height: 200px;
border-radius: 50%;
background-color: #000000;
position: absolute;
top:65px;
left:101px;
z-index: 3;
}
#tou_eye_left{
width: 70px;
height: 110px;
border-radius:50%/50% ;
background-color: #fff;
position: absolute;
left:210px;
top:60px;
margin:0 auto;
z-index: 4;
}
#tou_eye_right{
width: 70px;
height: 110px;
border-radius:50%/50% ;
background-color: #fff;
position: absolute;
left:300px;
top:60px;
margin:0 auto;
z-index: 4;
}
#eye_left_in{
width: 25px;
height: 33px;
border-radius: 50%/50%;
background-color: #000;
position: absolute;
top:115px;
left:250px;
margin:0 auto;
z-index: 4;
}
#eye_right_in{
width: 25px;
height: 33px;
border-radius: 50%/50%;
background-color: #000;
position: absolute;
top:115px;
left:305px;
margin:0 auto;
z-index: 4;
}
#mouth{
width: 185px;
height: 50px;
border-radius: 50%/50%;
background-color: #f28d2b;
position: absolute;
top:185px;
left:197px;
z-index: 4;
}
#mouth_bottom{
width: 120px;
height: 20px;
background-color: #f28d2b;
border-radius: 50%;
border-bottom:10px solid #000 ;
position: absolute;
left:230px;
top:206px;
z-index: 4;
}
#weibo{
width: 360px;
height:175px;
background-color: #e5332c;
border:1px solid #000;
border-radius: 50%;
position: absolute;
top:140px;
left:92px;
z-index:-1;
}
/身体上面的围脖/
#weibo1{
width: 70px;
height: 90px;
background-color:#e5332c ;
border:1px solid #000;
border-top-left-radius: 10px;
border-bottom-left-radius: 20%;
border-top-right-radius: 50%;
border-bottom-right-radius: 5px;
position: absolute;
left:170px;
top:290px;
z-index: -2;
}
/身体部分/
#body1{
width: 430px;
height: 380px;
background-color:#000000;
border-radius: 50%/50%;
position: absolute;
left: 60px;
top:200px;
z-index: -6;
}
#body_li{
width: 380px;
height: 300px;
background-color: #fff;
border-radius: 60%;
position: absolute;
left:90px;
top:270px;
z-index: -4;
}
#hand_left{
width: 50px;
height: 205px;
background-color: #000;
border-top-left-radius:50%;
border-bottom-left-radius: 50%;
border-top-right-radius: 20px;
border-bottom-right-radius: 50%;
position: absolute;
transform:rotate(30deg);
left:30px;
top:249px;
}
#hand_right{
width: 50px;
height: 205px;
background-color: #000;
border:1px solid #000;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius:20px;
border-bottom-left-radius: 50%;
position: absolute;
transform:rotate(-30deg);
left:460px;
top:249px;
}
#footer_left{
width: 200px;
height: 100px;
background-color: #f28d2b;
border-radius: 50%/50%;
position: absolute;
top:520px;
left:50px;
z-index: -7;
}
#footer_right{
width: 200px;
height: 100px;
background-color: #f28d2b;
border-radius: 50%/50%;
position: absolute;
top:520px;
left:280px;
z-index: -7;
}