欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

用css 畫小人

洪振霞1年前7瀏覽0評論

我們可以用 CSS 來畫一個簡單的小人,只需要用一些基礎的 CSS 屬性和 HTML 元素就可以實現。

/* 基礎樣式 */
.person {
position: relative;
width: 100px;
height: 200px;
background-color: #fff;
border-radius: 50px 50px 0 0;
}
/* 頭部 */
.head {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
}
/* 眼睛 */
.eye {
position: absolute;
top: 15px;
left: 17px;
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
}
/* 眼珠 */
.eye::before {
position: absolute;
top: 4px;
left: 4px;
content: "";
width: 8px;
height: 8px;
background-color: #000;
border-radius: 50%;
}
/* 嘴巴 */
.mouth {
position: absolute;
top: 27px;
left: 12px;
width: 26px;
height: 6px;
background-color: #000;
border-radius: 10px;
}
/* 身體 */
.body {
position: absolute;
top: 90px;
left: 0;
width: 100px;
height: 100px;
background-color: #fff;
}
/* 手臂 */
.arm {
position: absolute;
top: 100px;
width: 20px;
height: 80px;
background-color: #000;
border-radius: 10px;
}
.left-arm {
left: 0;
transform: rotate(15deg);
}
.right-arm {
right: 0;
transform: rotate(-15deg);
}
/* 腿 */
.leg {
position: absolute;
bottom: 0;
width: 20px;
height: 80px;
background-color: #000;
border-radius: 10px;
}
.left-leg {
left: 30px;
transform: rotate(-15deg);
}
.right-leg {
right: 30px;
transform: rotate(15deg);
}

用以上代碼就可以畫出一個簡單的小人了,當然如果想要更加真實的效果還需要更多細節的處理。