不廢話，先展示效果圖庄撮。下方以放置全部代碼背捌，粘貼即用。
網(wǎng)頁展示效果
image.png
手機(jī)端展示效果
微信圖片_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">在這個(gè)特別的時(shí)刻洞斯，我想對(duì)你說...</p>
<div id="hiddenMessage" style="display:none;font-size: 4vw;font-weight: bold;">我愛你毡庆，比昨天更多，但不及明天烙如。</div>
</div>
<div class="container"></div>
<script>
datas = [
'月色傾城照君顏', '愿君常伴此身邊',
'星河滾燙', '唯你溫柔入夢來',
'春風(fēng)十里', '不如你一笑傾城',
'紅塵萬千', '你是我唯一的執(zhí)念',
'花開一季', '愿與你共度四季輪回',
'歲月靜好', '與你攜手漫步時(shí)光長廊',
'晨曦初露', '你的笑是我每日的溫暖',
'星河長明', '不及你眼中的光芒閃爍',
'夢里花開', '夢外是你', '愿此生共白頭',
'時(shí)光匆匆', '唯愿與你相守到地老天荒',
'你是我心中永恒的旋律', '奏響愛的樂章',
'愿化作一縷輕煙', '隨風(fēng)飄向你的窗前',
'你的眼眸', '藏著星辰大海', '我愿沉溺其中',
'遇見你', '是命運(yùn)最美的安排', '愿珍惜此刻',
'你是我生命中的奇跡', '讓世界變得如此不同',
'愿與你共賞春花秋月', '夏雨冬雪', '歲歲年年',
'你的笑容', '是我抵御世間所有寒冷的陽光',
'在我心中', '你比繁星更加耀眼', '更加珍貴',
'愛如潮水', '洶涌澎湃', '只為你一人而流',
'愿與你并肩', '走過風(fēng)雨', '迎接每一個(gè)黎明',
'你是我此生最美的遇見', '愿與你共度余生',
'情深似海', '愛如磐石', '愿與你相守到老',
'你的溫柔', '是我心靈的歸宿', '是我永遠(yuǎn)的港灣',
'愿化作一只蝴蝶', '飛入你的心田', '與你共舞',
'你是我生命中的光', '照亮我前行的道路',
'與你相遇', '是我最大的幸運(yùn)', '愿與你共度此生',
'愛河深似海','愿與你同舟共濟(jì)','直到彼岸',
'你的聲音','如同天籟之音','讓我沉醉不已',
'在每一個(gè)晨光熹微的清晨','我都想你如初',
'與你共度的時(shí)光','比任何珍寶都更加珍貴',
'你是我心靈的港灣','讓我在疲憊時(shí)得以安歇',
'愿化作一滴露珠','清晨時(shí)分輕輕落在你的葉尖',
'與你相遇','是我此生最美的風(fēng)景','愿與你共賞',
'你的存在','讓我的世界變得更加絢爛多彩',
'在每一個(gè)星光璀璨的夜晚','我都在思念你',
'愿與你攜手','走過人生的每一個(gè)春夏秋冬'
];
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>
