本文整个项目在我的资源里面—>>>情人节表白代码(2)里面有详细使用说明。
其他表白代码:
html表白代码大全(10个效果):html表白代码大全
情人节表白代码(1):情人节表白代码(1)
情人节烟花表白代码:烟花特效表白
效果:
照片,表白话语和背景音乐都可以改。
核心代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>爱在心中</title>
<style>
body {
background: #000;
height: 100vh;
overflow: hidden;
}
#ui .love {
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
}
#ui .love:last-child .love_word {
color: red;
font-size: 3.5rem;
text-shadow: 0 0 10px red;
}
#ui .love_word {
color: #fff;
font-size: 1.4rem;
transform: translateY(-100%) rotateZ(-30deg);
font-family: 'Dosis', sans-serif;
text-shadow: 0 0 10px #ffc800;
letter-spacing: 2px;
}
#ui .love_horizontal {
animation: horizontal 10000ms infinite alternate ease-in-out;
}
#ui .love_vertical {
animation: vertical 20000ms infinite linear;
}
#ui .love:nth-child(1) .love_horizontal {
animation-delay: -300ms;
}
77.5% {
transform: translateY(441.17647px);
}
79% {
transform: translateY(428.57143px);
}
100% {
transform: translateY(180px);
}
}
</style>
</head>
<body>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">我喜欢你</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">和我</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">好吗</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">和我</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">在一起</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">好吗</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">和我</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">在一起</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">好吗</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">爱</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">小姐姐</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">好吗</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">love</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">小姐姐</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">我喜欢你</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">和我</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">么么哒</div>
</div>
</div>
</div>
<div class="love">
<div class="love_horizontal">
<div class="love_vertical">
<div class="love_word">Love</div>
</div>
</div>
</div>
</div>
<div><img style="position:absolute;
z-index:-1;
top:40%;
width:250px;
height:200px;
left:45%;"
src="https://c-ssl.duitang.com/uploads/item/202004/05/20200405145947_wlbug.thumb.400_0.jpg"></div>
<audio autoplay="autoplay" loop="loop" preload="auto"
src="http://music.163.com/song/media/outer/url?id=1474411443.mp3">
</audio>
</body>
</html>
代码补充: 上述只是核心代码,并不是全部代码。
想要换背景音乐的话就换第四行的音乐链接,可以看我的另一篇文章—>>>怎么获取音乐的链接地址?
整个项目在我的资源里面:
情人节表白代码(2)
里面有使用说明。