64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Code</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.watermark-container {
|
|
pointer-events: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.watermark {
|
|
position: absolute;
|
|
color: rgba(0, 0, 0, 0.08);
|
|
font-size: 20px;
|
|
transform: rotate(-30deg);
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="watermark-container" id="watermark-container"></div>
|
|
|
|
<div style="padding: 100px;">
|
|
<p>🌞 hi~</p>
|
|
<p> 愿你代码如诗，逻辑清晰，Bug 自动远离！</p>
|
|
<p> 记得适当休息，喝杯好茶或咖啡，为灵感续航 ☕</p>
|
|
<p> 加油，永远相信美好的事情即将发生。 ✨</p>
|
|
</div>
|
|
|
|
<script>
|
|
const container = document.getElementById("watermark-container");
|
|
const text = "fdesk 总台系统";
|
|
const xCount = 8; // 横向水印数量
|
|
const yCount = 6; // 纵向水印数量
|
|
const xSpacing = window.innerWidth / xCount;
|
|
const ySpacing = window.innerHeight / yCount;
|
|
|
|
for (let i = 0; i < yCount; i++) {
|
|
for (let j = 0; j < xCount; j++) {
|
|
const div = document.createElement("div");
|
|
div.className = "watermark";
|
|
div.textContent = text;
|
|
div.style.left = `${j * xSpacing}px`;
|
|
div.style.top = `${i * ySpacing}px`;
|
|
container.appendChild(div);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |