不废话，先展示效果图。下方以放置全部代码，粘贴即用。
网页展示效果
image.png
手机端展示效果
微信图片_20240704202106.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>浪漫表白</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
background-color: black;
color: #fff;
perspective: 1000px;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
position: relative;
}
main{
width: 100vh;
height: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
:root {
--margin-top: 0;
--margin-left: 0;
--animation-duration: 0s;
--animation-delay: 0s;
}
div {
transform-style: preserve-3d;
}
.createDiv-box,
.createDiv-box .createDiv{
position: absolute;
animation: rotY 0s linear infinite;
animation-duration: var(--animation-duration);
animation-delay: var(--animation-delay);
}
.createDiv-box{
margin-top: var(--margin-top);
}
.createDiv-box .createDiv{
margin-left: var(--margin-left);
}
.createDiv-box .createDiv {
animation-duration: reverse;
}
@keyframes rotY {
to{
transform: rotateY(360deg);
}
}
.font1{
cursor: pointer;
}
.container{
position: absolute;
z-index: -9999999;
}
</style>
</head>
<body>
<div class="main">
<h1 onclick="showLove()" class="font1">致我最喜欢的你</h1>
<p class="font1">在这个特别的时刻，我想对你说...</p>
<div id="hiddenMessage" style="display:none;font-size: 4vw;font-weight: bold;">我爱你，比昨天更多，但不及明天。</div>
</div>
<div class="container"></div>
<script>
datas = [
'月色倾城照君颜', '愿君常伴此身边',
'星河滚烫', '唯你温柔入梦来',
'春风十里', '不如你一笑倾城',
'红尘万千', '你是我唯一的执念',
'花开一季', '愿与你共度四季轮回',
'岁月静好', '与你携手漫步时光长廊',
'晨曦初露', '你的笑是我每日的温暖',
'星河长明', '不及你眼中的光芒闪烁',
'梦里花开', '梦外是你', '愿此生共白头',
'时光匆匆', '唯愿与你相守到地老天荒',
'你是我心中永恒的旋律', '奏响爱的乐章',
'愿化作一缕轻烟', '随风飘向你的窗前',
'你的眼眸', '藏着星辰大海', '我愿沉溺其中',
'遇见你', '是命运最美的安排', '愿珍惜此刻',
'你是我生命中的奇迹', '让世界变得如此不同',
'愿与你共赏春花秋月', '夏雨冬雪', '岁岁年年',
'你的笑容', '是我抵御世间所有寒冷的阳光',
'在我心中', '你比繁星更加耀眼', '更加珍贵',
'爱如潮水', '汹涌澎湃', '只为你一人而流',
'愿与你并肩', '走过风雨', '迎接每一个黎明',
'你是我此生最美的遇见', '愿与你共度余生',
'情深似海', '爱如磐石', '愿与你相守到老',
'你的温柔', '是我心灵的归宿', '是我永远的港湾',
'愿化作一只蝴蝶', '飞入你的心田', '与你共舞',
'你是我生命中的光', '照亮我前行的道路',
'与你相遇', '是我最大的幸运', '愿与你共度此生',
'爱河深似海','愿与你同舟共济','直到彼岸',
'你的声音','如同天籁之音','让我沉醉不已',
'在每一个晨光熹微的清晨','我都想你如初',
'与你共度的时光','比任何珍宝都更加珍贵',
'你是我心灵的港湾','让我在疲惫时得以安歇',
'愿化作一滴露珠','清晨时分轻轻落在你的叶尖',
'与你相遇','是我此生最美的风景','愿与你共赏',
'你的存在','让我的世界变得更加绚烂多彩',
'在每一个星光璀璨的夜晚','我都在思念你',
'愿与你携手','走过人生的每一个春夏秋冬'
];
function showLove() {
let message = document.getElementById("hiddenMessage");
let fontArray = document.getElementsByClassName("font1");
for (const iterator of fontArray) {
console.info(iterator)
iterator.style.display = "none";
}
if (message.style.display === "none") {
message.style.display = "block";
}
}
function randomNum(min, max) {
var num = (Math.random() * (max - min + 1) + min).toFixed(2);
return num;
}
function init() {
let container = document.querySelector('.container');
let f = document.createDocumentFragment();
datas.forEach(w => {
let createBox = document.createElement('div');
let createDiv = document.createElement('div');
createDiv.innerText = w;
createDiv.classList.add('createDiv');
createDiv.style.color = '#fff';
createDiv.style.fontSize = '1vw'
createBox.classList.add('createDiv-box');
createBox.style.setProperty("--margin-top", randomNum(-30, 20) + 'vh');
createBox.style.setProperty("--margin-left", randomNum(5, 40) + 'vw');
createBox.style.setProperty("--animation-duration", randomNum(8, 20) + 's');
createBox.style.setProperty("--animation-delay", randomNum(-20, 0) + 's');
createBox.appendChild(createDiv);
f.appendChild(createBox);
})
container.appendChild(f);
}
window.addEventListener('load', init);
</script>
</body>
</html>
