红影 发表于 2025-7-8 23:34

《坠入梦境》（学习黑黑《Epic Sport Rock》代码）

<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/686d344c58cb8da5c8977fc7.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
    #btnFs { bottom: 30px; right: 340px; color: #365f26; border-color: #365f26 !important; }
    #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .6; pointer-events: none; }
    #player { position: absolute; width: 200px; height: 200px; filter: drop-shadow(200px 200px 20px black); top: 160px; left: 320px; perspective: 1200px; transform-style: preserve-3d; }
    #player:hover { perspective: 300px; }
    .sdiv { position: absolute; width: 200px; height: 200px; background: url('https://pic1.imgdb.cn/item/686d341158cb8da5c8977e91.png') no-repeat center/cover; cursor: pointer;filter: drop-shadow(0 0 60px black); transform: rotateX(35deg) rotateY(25deg) rotateZ(0); animation: rot3d 12s linear infinite var(--state); }
    @keyframes rot3d { to { transform: rotateX(35deg) rotateY(25deg) rotateZ(360deg); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2023566712" autoplay loop></audio>
    <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/01/45/01/video6362ac9d14d34.mp4" autoplay loop muted></video>
    <div id="player">
      <div class="sdiv"></div>
    </div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
    FS(papa, player);
</script>

红影 发表于 2025-7-8 23:39

这样的梦好像挺现代，算是探索未来了。谢谢黑黑的代码，假装科幻片吧@马黑黑 {:4_173:}

梦油 发表于 2025-7-9 09:29

如梦如幻的意境使人“想入非非”。{:5_116:}

杨帆 发表于 2025-7-9 11:28

很酷的科幻片，谢谢影子精彩分享{:4_204:}

梦江南 发表于 2025-7-9 12:32

像是在探险，音乐很酷。{:4_187:}

马黑黑 发表于 2025-7-9 14:01

太美啦！看着发呆了{:4_189:}

红影 发表于 2025-7-9 22:34

梦油 发表于 2025-7-9 09:29
如梦如幻的意境使人“想入非非”。

像不像真的在梦里，只是这个梦还带点科技{:4_173:}

红影 发表于 2025-7-9 22:35

杨帆 发表于 2025-7-9 11:28
很酷的科幻片，谢谢影子精彩分享

谢谢杨帆鼓励，做着玩呢{:4_173:}

杨帆 发表于 2025-7-9 22:36

红影 发表于 2025-7-9 22:35
谢谢杨帆鼓励，做着玩呢

挺好，玩开心就好{:4_187:}

红影 发表于 2025-7-9 22:36

梦江南 发表于 2025-7-9 12:32
像是在探险，音乐很酷。

有点梦中探索的感觉呢{:4_173:}

红影 发表于 2025-7-9 22:37

马黑黑 发表于 2025-7-9 14:01
太美啦！看着发呆了

也不知道这是一个什么场所，只能当它是梦境中吧{:4_173:}

马黑黑 发表于 2025-7-9 22:55

红影 发表于 2025-7-9 22:37
也不知道这是一个什么场所，只能当它是梦境中吧

很美的梦境

红影 发表于 2025-7-9 23:13

杨帆 发表于 2025-7-9 22:36
挺好，玩开心就好

嗯嗯，我把自己玩得挺迷幻{:4_173:}

红影 发表于 2025-7-9 23:14

马黑黑 发表于 2025-7-9 22:55
很美的梦境

应该能探索出很多未知的东东{:4_173:}

梦油 发表于 2025-7-10 11:22

红影 发表于 2025-7-9 22:34
像不像真的在梦里，只是这个梦还带点科技

新潮的梦幻。{:5_116:}

马黑黑 发表于 2025-7-10 12:50

红影 发表于 2025-7-9 23:14
应该能探索出很多未知的东东

也许啥都有呢

红影 发表于 2025-7-10 20:46

梦油 发表于 2025-7-10 11:22
新潮的梦幻。

梦里溜达多了也不是好事，会让人休息不好呢{:4_173:}

红影 发表于 2025-7-10 21:29

马黑黑 发表于 2025-7-10 12:50
也许啥都有呢

就算梦里什么都有，也带不出来啊{:4_173:}

马黑黑 发表于 2025-7-10 22:19

红影 发表于 2025-7-10 21:29
就算梦里什么都有，也带不出来啊

想要的时候就去梦一个{:4_170:}

红影 发表于 2025-7-10 23:09

马黑黑 发表于 2025-7-10 22:19
想要的时候就去梦一个

你的意思，在梦里享受了，也当是享受过了呗。
页: [1] 2 3
查看完整版本: 《坠入梦境》（学习黑黑《Epic Sport Rock》代码）