红影 发表于 2024-4-23 23:28

三分半时空（套用黑黑《Blissful Mind》效果）


<style>
#papa { margin: 60px 0 20px calc(50% - 721px); width: 1280px; height: 700px; background: url('https://pic.imgdb.cn/item/6627cb5b0ea9cb1403680020.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px rgba(0,0,0,.6); z-index: 1; display: grid; place-items: center; position: relative; }
#player { position: absolute; bottom: 20; left: 510px; width: 320px; height: 380px; cursor: pointer; z-index: 10; }
.vid { position: absolute; bottom: 20px; left: 510px; width: 320px; height: 320px; object-fit: cover; mix-blend-mode: screen; }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2009588233" autoplay loop></audio>
    <video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/84/5b4b374a50485_10s_big.mp4" loop muted></video>
    <div id="player" title="播放/暂停"></div>
</div>

<script>

var vids = document.querySelectorAll('.vid');
var sc = document.createElement('script');
sc.charset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js/dot-lz.js';
document.body.appendChild(sc);

var lz = {papa: '#papa', total: 120, r: 4, max_r: 12, step: 0.5, color: 'rgba(255,255,0,.7)', opacity: .9, move: false};

var mState = () => {
    vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
    lz.move = !aud.paused;
};

aud.onplaying = aud.onpause = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

红影 发表于 2024-4-23 23:30

感觉这效果特别有趣，跟着套用一个。本来想再加个向内的视频，怕乱。就这样吧。
谢谢@马黑黑 的代码{:4_187:}

红影 发表于 2024-4-23 23:32

找个视频挺好玩，节点上小球也能变大，呼应一下黑黑的封装的变大粒子也挺好{:4_173:}

红影 发表于 2024-4-23 23:33

没时间去回复了，明天要早起。下了。

起个网名好难 发表于 2024-4-24 07:25

很魔幻的样子{:5_106:}

https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20200426/5347a957264e42fc9c29f5afa85f0480.gif

梦油 发表于 2024-4-24 09:17

仿佛是走进了太空，配乐极佳。{:5_116:}

朵拉 发表于 2024-4-24 09:28

这个效果漂亮~~{:4_204:}

马黑黑 发表于 2024-4-24 12:46

{:4_199:}

小文 发表于 2024-4-24 14:16

唯美的设计{:4_204:}

南无月 发表于 2024-4-24 21:05

影子出手就是不凡。。
背景图片和粒子圆形立体小播完美结合，
形成一个梦幻之极的异度空间。。{:4_204:}

南无月 发表于 2024-4-24 21:06

粒子颜色调和跟小播上的色彩一致，
仿佛是从小播转动时旋转出去的。。
这个构思太妙了。。{:4_204:}

醉美水芙蓉 发表于 2024-4-24 21:19

红影 发表于 2024-4-24 23:04

起个网名好难 发表于 2024-4-24 07:25
很魔幻的样子

谢谢难难鼓励{:4_187:}

红影 发表于 2024-4-24 23:05

梦油 发表于 2024-4-24 09:17
仿佛是走进了太空，配乐极佳。

音乐和图片都是临时找的，为了学习代码{:4_173:}

红影 发表于 2024-4-24 23:05

朵拉 发表于 2024-4-24 09:28
这个效果漂亮~~

谢谢朵宝鼓励{:4_187:}

红影 发表于 2024-4-24 23:06

马黑黑 发表于 2024-4-24 12:46


谢谢黑黑的代码，这个变化的粒子封装很奇妙{:4_187:}

红影 发表于 2024-4-24 23:06

小文 发表于 2024-4-24 14:16
唯美的设计

谢谢小文，是跟着学习一下代码{:4_173:}

红影 发表于 2024-4-24 23:07

南无月 发表于 2024-4-24 21:05
影子出手就是不凡。。
背景图片和粒子圆形立体小播完美结合，
形成一个梦幻之极的异度空间。。

这个就是完全套用呢，是黑黑的代码奇妙{:4_173:}

红影 发表于 2024-4-24 23:08

南无月 发表于 2024-4-24 21:06
粒子颜色调和跟小播上的色彩一致，
仿佛是从小播转动时旋转出去的。。
这个构思太妙了。。

先找的播放器按钮的视频，然后用这个视频去找配套图片，再找音乐。就这么凑出来的{:4_173:}

红影 发表于 2024-4-24 23:09

醉美水芙蓉 发表于 2024-4-24 21:19
红影美女这个效果真漂亮！

谢谢水芙蓉美女，好久不见，问好{:4_187:}
页: [1] 2
查看完整版本: 三分半时空（套用黑黑《Blissful Mind》效果）