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

html愛心小人表白代碼

錢瀠龍1年前7瀏覽0評論

今天讓我來為大家介紹一款最近非常流行的HTML小人表白代碼,它能夠讓你的表白更加的有創意和浪漫。

<html>
<head>
<title>HTML小人表白代碼</title>
<style>
.love {
width: 20px;
height: 20px;
background-color: pink;
border-radius: 50% 50% 0 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.body {
width: 80px;
height: 100px;
background-color: #f3c8a9;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
}
.hand {
width: 10px;
height: 30px;
background-color: #f3c8a9;
position: absolute;
z-index: 5;
top: 10px;
}
.l-hand {
left: -10px;
transform: rotate(45deg);
transform-origin: bottom right;
}
.r-hand {
right: -10px;
transform: rotate(-45deg);
transform-origin: bottom left;
}
.eye {
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 20px;
z-index: 5;
}
.l-eye {
left: 25%;
}
.r-eye {
right: 25%;
}
.mouth {
width: 40px;
height: 10px;
background-color: #dc3c3c;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
z-index: 5;
border-radius: 0 0 50% 50%;
}
.tongue {
width: 10px;
height: 5px;
background-color: pink;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, 50%);
z-index: 6;
border-radius: 50%;
}
.message {
position: absolute;
top: -60px;
font-size: 24px;
text-align: center;
width: 200px;
left: 50%;
transform: translate(-50%, 0);
}
.message p {
line-height: 30px;
}
.button {
border: none;
outline: none;
background-color: #dc3c3c;
color: white;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 25px;
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
}
.button:hover {
background-color: #f44336;
}
</style>
</head>
<body>
<div class="love"></div>
<div class="body"></div>
<div class="hand l-hand"></div>
<div class="hand r-hand"></div>
<div class="eye l-eye"></div>
<div class="eye r-eye"></div>
<div class="mouth"></div>
<div class="tongue"></div>
<div class="message">
<p>我喜歡你,<br>愿意跟你共度一生。</p>
</div>
<button class="button">接受我的愛吧</button>
</body>
</html>

以上就是這款HTML小人表白代碼的全部內容,如果你想要讓你的表白更加的有創意和印象深刻,不妨試著使用這個代碼來打造你心目中的浪漫場景吧!