HTML520表白代碼在現(xiàn)今社交網(wǎng)絡(luò)中備受推崇，成為了表白神器，其簡(jiǎn)潔易懂的代碼及其溫馨浪漫的效果讓許多人為之傾倒。
下面介紹一下HTML520表白代碼的具體使用方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>520表白特效</title>
<style>
.container {
position: relative;
width: 600px;
height: 300px;
margin: 0 auto;
background-image: url("背景圖片鏈接地址");
background-size: cover;
font-family: "STKaiti";
}
.heart {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
animation: heartbeat 1s cubic-bezier(0.28, 0.48, 0.46, 1) infinite;
}
@keyframes heartbeat {
0% {
transform: scale3d(0.75, 0.75, 0.75);
}
20% {
transform: scale3d(1, 1, 1);
}
40% {
transform: scale3d(0.75, 0.75, 0.75);
}
60% {
transform: scale3d(1, 1, 1);
}
80% {
transform: scale3d(0.75, 0.75, 0.75);
}
to {
transform: scale3d(0.75, 0.75, 0.75);
}
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: #ff69b4;
border-radius: 50%;
}
.heart:before {
left: -25px;
top: 0;
width: 50px;
height: 50px;
}
.heart:after {
left: 0;
top: -25px;
width: 50px;
height: 50px;
}
.words {
position: relative;
top: 120px;
text-align: center;
}
.words h1 {
color: #fff;
font-size: 60px;
letter-spacing: 5px;
margin-bottom: 20px;
}
.words p {
color: #fff;
font-size: 25px;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="heart"></div>
<div class="words">
<h1>我愛你</h1>
<p>520表白，無需多言</p>
</div>
</div>
</body>
</html>以上是HTML520表白代碼的詳細(xì)介紹，如果你想要為自己特別的人表達(dá)你的愛意，那么這個(gè)特效一定會(huì)讓你的表白更有意義。