《盗梦空间》（学黑黑《Tupac Amaru》代码）
<style>
#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: #333 url('https://pic1.imgdb.cn/item/686fcf9558cb8da5c89ab46f.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; perspective: 500px; z-index: 1; position: relative; --state: running; --z: -300px; }
#btnFs { left: 15px; bottom: 20px; color: white; }
#vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: 1; pointer-events: none; }
#lzwrap { position: absolute; top:-124px; width: 100%; height: 100%; transform-style: preserve-3d; display: grid; place-items: center; }
li-zi { position: absolute; width: 44px; height: 50px; border-radius: 50%; background: url('https://pic1.imgdb.cn/item/686fcfec58cb8da5c89ab4a8.png') no-repeat center/cover; cursor: pointer; transform: rotateY(0) translate3d(0, 40px, var(--z)) rotateY(0); animation: runcircle 30s var(--delay) linear infinite var(--state); }
#player { position: absolute; width: 260px; height: 260px; background: url('https://pic1.imgdb.cn/item/686fd0eb58cb8da5c89ab521.png') no-repeat center/cover; transform: rotateX(35deg) rotateZ(0); cursor: pointer; animation: rot3d 6s linear infinite var(--state); filter: drop-shadow(0 0 20px #333) opacity(0.8); }
@keyframes rot3d { to { transform: rotateX(35deg) rotateZ(360deg); backface-visibility: visible; } }
@keyframes runcircle { to { transform: rotateY(-360deg) translate3d(0, 40px, var(--z)) rotateY(360deg) rotateZ(-6turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2112321" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/13/11/58/video6365f09e5b70c.mp4" autoplay loop muted></video>
<div id="lzwrap">
<div id="player"></div>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/FS.js';
var total = 16;
Array.from({length: total}).forEach((lz, idx) => {
lz = document.createElement('li-zi');
lz.title = 'Alt+X';
lz.style.cssText += `
filter: hue-rotate(${360 * Math.random()}deg);
--delay: -${idx * 30 / total}s;
`;
lz.onclick = () => player.click();
lzwrap.appendChild(lz);
});
window.onresize = () => papa.style.setProperty('--z', -300 * papa.clientWidth/1400 + 'px');
FS(papa, player);
</script> 这个的效果和八扇屏的转动差不多，我把这个效果抬高点，就成了从下往上看了@马黑黑 {:4_173:} 这个是盗梦空间的推广曲，这样的场景总感觉有些阴森{:4_173:} 画面配音乐加强了一种恐佈感。{:4_199:} 画面，粒子、音乐等元素构成了一贴玄幻的梦境空间，期间音乐高潮与低俗交替出声，更是增加的恐怖的效果！ 里面音乐双突然无声，貌似文字中的留白，给人以无限的想象空间！ 盗梦者把好梦给盗走了，留下的是一地的恐怖。{:4_173:} 听着音乐，看着画面，真让人毛骨悚然。 奇特的效果，谢谢影子精彩分享{:4_204:} 梦江南 发表于 2025-7-11 08:59
画面配音乐加强了一种恐佈感。
是有点吓人{:4_173:} 樵歌 发表于 2025-7-11 09:14
画面，粒子、音乐等元素构成了一贴玄幻的梦境空间，期间音乐高潮与低俗交替出声，更是增加的恐怖的效果！
那个转动的小元素是盗梦空间里的道具，不会让它竖向转，就这样大翻身地转着了{:4_173:} 樵歌 发表于 2025-7-11 09:15
里面音乐双突然无声，貌似文字中的留白，给人以无限的想象空间！
是的，这音乐还真有这样的特点，师兄说得太对了{:4_199:} 红影 发表于 2025-7-11 12:12
是有点吓人
佩服你的想象力！{:4_173:} 樵歌 发表于 2025-7-11 09:16
盗梦者把好梦给盗走了，留下的是一地的恐怖。
无论好梦噩梦，里面总有许多人无法控制的东西。 梦油 发表于 2025-7-11 09:26
听着音乐，看着画面，真让人毛骨悚然。
去搜图时看到这张图图，觉得很奇特，就用来做贴了{:4_173:} 杨帆 发表于 2025-7-11 11:58
奇特的效果，谢谢影子精彩分享
谢谢杨帆鼓励，跟着学习个代码玩{:4_173:} 梦江南 发表于 2025-7-11 12:15
佩服你的想象力！
主要这图图有趣，非常奇妙{:4_173:} 红影 发表于 2025-7-11 12:16
去搜图时看到这张图图，觉得很奇特，就用来做贴了
另辟蹊径，好。{:5_116:} 梦油 发表于 2025-7-11 13:39
另辟蹊径，好。
一般能找到什么样的图图都只是偶遇呢{:4_173:} 红影 发表于 2025-7-11 12:15
无论好梦噩梦，里面总有许多人无法控制的东西。
是的，人类对未知总是特别恐惧的，你这音乐选 得特别绝！
页:
[1]
2