海绵宝宝HTML代码

最新推荐文章于 2024-08-23 17:31:24 发布

·용

最新推荐文章于 2024-08-23 17:31:24 发布

阅读量1.2k

点赞数 1

文章标签：数学建模 dreamweaver java

本文链接：https://blog.csdn.net/qq_65678218/article/details/130845186

版权

这段HTML代码用于创建一个海绵宝宝的卡通形象，包括眼睛、眼睫毛、鼻子、脸颊、嘴巴和脸上的洞等细节，使用CSS进行样式设置，通过定位和形状设计来形成海绵宝宝的特征。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

body {
width: 100vw;
height: 100vh;
background-color: #FFF400;
}

/* 脸 */
.face {
position: relative;
height: 600px;
width: 600px;
margin: 0 auto;
margin-top: 5%;
}

/* 眼睛 */
.eyes_left,
.eyes_right {
position: absolute;
height: 190px;
width: 190px;
top: 18%;
background: white;
border-radius: 50%;
border: 5px solid black;
}

.eyes_left {
left: 20%;
}

.eyes_right {
right: 19%;
}

/* 眼睫毛 */
.eyelashes_1 {
position: absolute;
top: 15%;
left: 28%;
height: 5%;
width: 1.5%;
background: black;
transform: rotate(-12deg);
box-shadow: 160px 41px 0 black;
}

.eyelashes_2 {
position: absolute;
top: 13.4%;
left: 35%;
height: 5%;
width: 1.5%;
background: black;
box-shadow: 160px 2px 0 black;

}

.eyelashes_3 {
position: absolute;
top: 14.9%;
left: 42%;
height: 5%;