用css画一个csdn程序猿
以下是使用CSS创建一个简单程序猿图形的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cutey Programmer</title>
<style>
.programmer {
position: relative;
width: 200px;
height: 300px;
background: #29b6f6;
border-radius: 50% 50%;
margin: 50px auto;
}
.programmer::before, .programmer::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.programmer::before {
width: 60px;
height: 100px;
background: #29b6f6;
border-radius: 50%;
}
.programmer::after {
width: 80px;
height: 120px;
background: #29b6f6;
border-radius: 50%;
z-index: -1;
}
.programmer-body::before, .programmer-body::after {
content: '';
position: absolute;
width: 100px;
height: 180px;
background: #29b6f6;
border-radius: 50%;
}
.programmer-body::before {
top: -50px;
left: 20px;
z-index: -1;
}
.programmer-body::after {
bottom: -50px;
right: 20px;
z-index: -1;
}
.programmer-head {
position: absolute;
top: -60px;
left: 60px;
width: 60px;
height: 60px;
background: #29b6f6;
border-radius: 50%;
z-index: 1;
}
.programmer-ear {
position: absolute;
width: 40px;
height: 40px;
background: #29b6f6;
border-radius: 50%;
z-index: 1;
}
.programmer-ear.left {
top: -10px;
left: 30px;
}
.programmer-ear.right {
top: -10px;
right: 30px;
}
.programmer-eye {
position: absolute;
width: 16px;
height: 28px;
background: white;
border-radius: 50%;
z-index: 1;
}
.programmer-eye.left {
top: 40px;
left: 40px;
}
.programmer-eye.right {
top: 40px;
right: 40px;
}
.programmer-eyebrow {
position: absolute;
width: 80px;
height: 12px;
background: #29b6f6;
border-radius: 50%;
z-index: 1;
}
.programmer-eyebrow.left {
top: 32px;
left: 32px;
transform: rotate(-20deg);
}
.programmer-eyebrow.right {
top: 32px;
right: 32px;
transform: rotate(20deg);
}
.programmer-nose {
position: absolute;
width: 24px;
he
评论已关闭