💚 九龙拉棺网页特效
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九龙拉棺</title>
<style>
/* CSS样式部分 */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* 防止滚动条出现 */
}
a, a:hover, a:focus {
text-decoration: none;
color: #06C1AE;
}
#video-background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
transform: translate(-50%, -50%);
object-fit: cover; /* 保持视频比例并覆盖全屏 */
background: url('fallback.jpg') no-repeat center center; /* 备用图片 */
background-size: cover;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 20%;
font-family: Arial, sans-serif;
}
/* 移动设备适配 */
@media (max-width: 768px) {
#video-background {
-display: none; /* 小屏幕隐藏视频 */
}
body {
background: url('fallback.jpg') no-repeat center center fixed;
background-size: cover;
}
}
.botm{position:absolute;bottom:0px;left:50%;-webkit-transform:translatex(-50%);transform:translatex(-50%);font-size:15px;text-align:center;color:#ccc;z-index:8}
#phantom-text {
position: absolute;
font-size: 2em;
font-weight: bold;
color: #ff3366;
pointer-events: none; /* 防止文字阻碍鼠标事件 */
text-shadow: 0 0 5px rgba(255, 51, 102, 0.5),
0 0 10px rgba(255, 51, 102, 0.3),
0 0 15px rgba(255, 51, 102, 0.2); /* 多层阴影创造幻影效果 */
transition: transform 0.1s ease-out; /* 平滑过渡效果 */
white-space: nowrap; /* 防止文字换行 */
z-index: 9999; /* 确保文字在最上层 */
}
/* 可选：添加一个自定义鼠标指针 */
.cursor {
-width: 20px;
-height: 20px;
border-radius: 150%;
background-color: rgba(255, 51, 102, 0.7);
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 9998;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<div id="phantom-text">九龙拉棺 - jiulonglaguan.com</div>
<div class="cursor" id="cursor"></div>
<script>
// 获取DOM元素
const text = document.getElementById('phantom-text');
const cursor = document.getElementById('cursor');
// 初始位置设置
let mouseX = 0;
let mouseY = 0;
let textX = 0;
let textY = 0;
// 监听鼠标移动事件
document.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
// 更新自定义鼠标位置
cursor.style.left = mouseX + 'px';
cursor.style.top = mouseY + 'px';
});
// 动画循环，使用requestAnimationFrame优化性能
function animate() {
// 计算文字位置（添加一些偏移量使效果更自然）
textX += (mouseX - textX - text.offsetWidth/2) * 0.1;
textY += (mouseY - textY - text.offsetHeight/2) * 0.1;
// 应用变换
text.style.transform = `translate(${textX}px, ${textY}px)`;
// 继续动画
requestAnimationFrame(animate);
}
// 启动动画
animate();
// 可选：点击时添加特效
document.addEventListener('click', function() {
text.style.color = getRandomColor();
text.textContent = getRandomText();
});
// 辅助函数：生成随机颜色
function getRandomColor() {
const colors = ['#ff3366', '#33ff66', '#3366ff', '#ff33cc', '#33ccff'];
return colors[Math.floor(Math.random() * colors.length)];
}
// 辅助函数：生成随机文本
function getRandomText() {
const texts = ['你好！', '欢迎光临！', '九龙拉棺', 'www.jiulonglaguan.com', '九龙拉棺 - www.jiulonglaguan.com'];
return texts[Math.floor(Math.random() * texts.length)];
}
</script>
<!-- 视频背景 -->
<video id="video-background" autoplay muted loop>
<source src="https://china-img.soulapp.cn/video/2025-08-18/e29364e0-f6df-403b-a5b2-21a4924c867e_reso_a.mp4" type="video/mp4">
<!-- 可选：添加其他格式以提高兼容性 -->
<!-- <source src="background.webm" type="video/webm"> -->
您的浏览器不支持HTML5视频标签。
</video>
<!-- 页面内容 -->
<!-- <div class="content">
<h1>九龙拉棺</h1>
<p>Www.jiulonglaguan.com</p>
</div>-->
<div class="botm">
<p>Copyright @ 2018-2025 九龙拉棺 版权所有✦<a style="color:#ccc;" href="//beian.miit.gov.cn/" target="_Ban" title="渝ICP备2025063804号-3" data-i="ICP"> 渝ICP备2025063804号-3</a></p>
<p>本站为非盈利网站,內容出自原创和互联网, 如有侵权请及时联系删除！本站不承担任何争议和法律责任！</p>
</div>
<!-- 可选：JavaScript控制 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var video = document.getElementById('video-background');
// 检测视频是否可播放
video.addEventListener('canplay', function() {
console.log('视频可以播放');
});
// 视频加载失败时启用备用图片
video.addEventListener('error', function() {
console.log('视频加载失败');
document.body.style.background = 'url(fallback.jpg) no-repeat center center';
document.body.style.backgroundSize = 'cover';
});
});
</script>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
<!--dian ji yin xiao -->
<audio id="audio" src="https://jiulonglaguan.com/upfile/mp3/lv_0_20250809163354_1.mp3"></audio>
<script>
document.addEventListener("click", function() {
document.getElementById("audio").play();
});
</script>
<!--dian ji yin xiao-->
</body>
</html>演示地址
阅读：30
发布时间：