css小企鹅画 |easyui radio css

首先，在HTML中，大家需要创建一个div元素，将其命名为“penguin”。接下来，在CSS中，大家可以为这个div元素添加样式。

#penguin {
width: 300px;
height: 200px;
background-color: #ffffff;
border-radius: 150px/120px;
position: relative;
}

接下来，大家需要添加企鹅的身体和胃部。

#penguin .body {
width: 200px;
height: 120px;
background-color: #000000;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
border-radius: 300px/200px;
}
#penguin .belly {
width: 150px;
height: 100px;
background-color: #ffffff;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
border-radius: 150px/100px;
}

接下来，大家需要添加企鹅的头部、眼睛和嘴巴。

#penguin .head {
width: 60px;
height: 60px;
background-color: #000000;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
#penguin .eye {
width: 20px;
height: 20px;
background-color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
#penguin .eye::before {
content: "";
display: block;
width: 10px;
height: 10px;
background-color: #000000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
#penguin .beak {
width: 40px;
height: 20px;
background-color: #ffcc33;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px/5px;
}

最后，大家需要添加企鹅的脚。

#penguin .foot {
width: 50px;
height: 20px;
background-color: #000000;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
border-radius: 50px/10px;
}
#penguin .foot.left {
transform: translate(-50%, 0%) rotate(-45deg);
bottom: -10px;
}
#penguin .foot.right {
transform: translate(-50%, 0%) rotate(45deg);
bottom: -10px;
}

到这里，大家一个可爱的小企鹅就画好了。通过CSS，大家可以轻松地画出独一无二的网页元素。