html制作小猪佩奇卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #E9E9E4;
}
.rabbit-container {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rabbit-ear {
width: 100px;
height: 100px;
background: #000;
border-radius: 50%;
position: absolute;
top: 50px;
left: 30px;
transform: rotate(-30deg);
z-index: 10;
}
.rabbit-ear::before {
content: '';
width: 100px;
height: 50px;
background: #000;
border-radius: 50%;
position: absolute;
bottom: -50px;
left: -30px;
transform: rotate(-30deg);
}
.rabbit-ear::after {
content: '';
width: 100px;
height: 50px;
background: #000;
border-radius: 50%;
position: absolute;
bottom: -50px;
right: -30px;
transform: rotate(30deg);
}
.rabbit-body {
width: 180px;
height: 180px;
background: #FFF;
border-radius: 50%;
position: absolute;
bottom: -90px;
left: 0;
z-index: 5;
}
.rabbit-body::before {
content: '';
width: 30px;
height: 100px;
background: #000;
position: absolute;
bottom: -110px;
left: 75px;
z-index: 5;
border-radius: 30px 30px 0 0;
}
.rabbit-eye {
width: 20px;
height: 24px;
background: #000;
border-radius: 50%;
position: absolute;
bottom: -100px;
left: 60px;
}
.rabbit-eye::before {
content: '';
width: 8px;
height: 8px;
background: #FFF;
border-radius: 50%;
position: absolute;
bottom: 5px;
left: 10px;
}
.rabbit-nose {
width: 24px;
height: 18px;
评论已关闭