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

css畫企鵝

吉茹定2年前12瀏覽0評論

企鵝是一種特別可愛的生物,現在我們來試著用CSS來畫一只企鵝吧!

.penguin {
position: relative;
width: 300px;
height: 200px;
}
.body {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
border-radius: 50% 50% 45% 45%;
width: 100px;
height: 100px;
background-color: #eee;
}
.belly {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
border-radius: 50%;
width: 80px;
height: 80px;
background-color: white;
}
.right-arm, .left-arm {
position: absolute;
bottom: -20px;
width: 60px;
height: 20px;
background-color: #eee;
border-radius: 0px 0px 20px 20px;
}
.right-arm {
transform: rotate(45deg);
right: 70px;
}
.left-arm {
transform: rotate(-45deg);
left: 70px;
}
.right-cheek, .left-cheek {
position: absolute;
bottom: 0px;
width: 40px;
height: 30px;
background-color: #ffc0cb;
border-radius: 50%;
}
.right-cheek {
right: 130px;
}
.left-cheek {
left: 130px;
}
.right-eye, .left-eye {
position: absolute;
width: 30px;
height: 30px;
background-color: black;
border-radius: 50%;
}
.right-eye {
right: 90px;
bottom: 60px;
}
.left-eye {
left: 90px;
bottom: 60px;
}
.right-wing, .left-wing {
position: absolute;
width: 100px;
height: 60px;
background-color: #eee;
border-radius: 0px 60px 60px 0px;
transform: rotate(-45deg);
}
.right-wing {
right: -15px;
bottom: 30px;
}
.left-wing {
left: -15px;
bottom: 30px;
}
.beak-top, .beak-bottom {
position: absolute;
width: 36px;
height: 20px;
background-color: #ffc0cb;
transform: rotate(-45deg);
}
.beak-top {
top: 55px;
left: 50%;
transform: rotate(-45deg) translate(-50%, -50%);
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.beak-bottom {
top: 67px;
left: 50%;
transform: rotate(-45deg) translate(-50%, -50%);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}

以上就是CSS畫企鵝的代碼了,你可以將這段代碼復制到你的編輯器中運行看看效果哦!