📌  相关文章
📜  颤动的黑暗主题 (1)

📅  最后修改于: 2023-12-03 15:42:29.452000             🧑  作者: Mango

颤动的黑暗

这是一个以颤动的黑暗为主题的项目，主要目的是创建一个黑暗而令人毛骨悚然的体验。

技术栈

这个项目使用了以下技术：

  • HTML/CSS/JavaScript
  • 音频/视频
  • WebGL/Three.js
功能

这个项目的功能包括：

  • 全屏模式
  • 音频控制
  • 视频播放
  • WebGL特效
页面结构

这个项目包含了以下几个页面：

首页

这个页面是项目的主页面，包含一个短视频片段和一个音频控制器。

视频页面

这个页面包含完整的视频，并且通过Three.js创建了一个颤动而黑暗的特效。

音频页面

这个页面播放一个环境音频，并且通过WebGL创建了一个颤动而黑暗的特效。

代码片段

以下是一个示例的代码片段：

<!DOCTYPE html>
<html>
<head>
    <title>颤动的黑暗</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <video autoplay loop muted>
        <source src="video.mp4" type="video/mp4">
    </video>
    <div class="controls">
        <button id="play">Play</button>
        <button id="pause">Pause</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    margin: 0;
    padding: 0;
    background: #000;
}

video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

button {
    margin: 0 10px;
}

const video = document.querySelector('video');
const playButton = document.querySelector('#play');
const pauseButton = document.querySelector('#pause');

playButton.addEventListener('click', () => {
    video.play();
});

pauseButton.addEventListener('click', () => {
    video.pause();
});

以上代码包含了一个短视频和一个音频控制器，通过JavaScript实现了视频的播放和暂停。CSS实现了全屏背景视频的效果。