《若是月亮还没来》（学习黑黑《梦想》效果）
<style>
#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/663dee9b0ea9cb1403bfedde.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; z-index: 1; position: relative; }
#canv { position: absolute; bottom: 0; left: 260px; }
#vid { position: absolute; top: 260px; left: 285px; width: 352px; height: 217px; border-radius: 50% 40% 0 0; object-fit: cover; pointer-events: none; mix-blend-mode: screen; opacity: 0.3; }
#pic { position: absolute; left: 28px; top: 46px; transform: rotate(-8deg); }
#player { position: absolute; left: 760px; top: 260px; opacity: 0.6; width: 212px; cursor: pointer; animation: rot 10s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2146228675" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/50/5b445b647f231.mp4" loop muted></video>
<canvas id="canv" width="400" height="400"></canvas>
<img id="pic" src="https://pic.imgdb.cn/item/663e09070ea9cb1403f89257.png" alt="" />
<img id="player" alt="" src="https://pic.imgdb.cn/item/663e0d560ea9cb140304429f.png" />
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/cloth.js';
document.body.appendChild(sF);
aud.onplaying = aud.onpause = () => {
aud.paused ?
(vid.pause(), papa.style.setProperty('--state', 'paused')) :
(vid.play(), papa.style.setProperty('--state', 'running'));
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 粒子文字和播放器按钮都是按黑黑代码制作后存的图片，没本事用这两个的canvas代码，再加上帖子里原本用的帘子，太多的canvas了，不知道怎么弄到一起@马黑黑 {:4_173:} 若是月亮还没来，就把夕阳遮住，等着太阳下山就行了。
不想遮的话就把帘子啦起来，看看月亮来没来{:4_170:} 影子这个用了最新扯帘效果、颗粒化文字效果、还有自己制作的花朵效果。。
另外还有剧情，巧思妙作。。{:4_199:} 帘子后面有精彩。。这个视频光芒加得太棒了。。{:4_199:} 红影 发表于 2024-5-10 20:54
粒子文字和播放器按钮都是按黑黑代码制作后存的图片，没本事用这两个的canvas代码，再加上帖子里原本用的帘 ...
文字特效的canvas使用另外一个id并修改相应代码就行。不过存为图片也挺好，更能节省代码，除非需要文字也是动态的 南无月 发表于 2024-5-10 21:15
影子这个用了最新扯帘效果、颗粒化文字效果、还有自己制作的花朵效果。。
另外还有剧情，巧思妙作。。{:4_ ...
正好前两天听到这首歌，就用这个来做了，主要这个帘子太美了，只想赶紧跟着做个{:4_173:} 南无月 发表于 2024-5-10 21:16
帘子后面有精彩。。这个视频光芒加得太棒了。。
这个帘子刷新会变色，用了深色背景，怕变后看不见，加点光芒衬着防止把帘子弄没了{:4_173:} 马黑黑 发表于 2024-5-10 21:21
文字特效的canvas使用另外一个id并修改相应代码就行。不过存为图片也挺好，更能节省代码，除非需要文字也 ...
文字没想要动态，存图了代码少了，修改换歌名就没那么容易了，若是用代码，可以随便换歌名呢{:4_173:} 月亮被网套住了吧 绿叶清舟 发表于 2024-5-10 21:45
月亮被网套住了吧
管它套住的是什么，有网就一定要去用啊{:4_173:} 红影 发表于 2024-5-10 21:37
文字没想要动态，存图了代码少了，修改换歌名就没那么容易了，若是用代码，可以随便换歌名呢
这些其实入了门后都是可以驾驭的，它其实就是HTML元素id唯一 非常不错，欣赏了。 清风帘动月光来。好构图！ 以前，我看八一电影制片厂的电影时，非常喜欢片头那光芒四射的红五星。我看，影子朋友制作的《若是月亮还没来》那放射的“光芒”，与八一电影制片厂制作的片头有异曲同工之妙。 红影 发表于 2024-5-10 21:34
正好前两天听到这首歌，就用这个来做了，主要这个帘子太美了，只想赶紧跟着做个
的确好看，主要跟小宠物似的灵活，还可以互动{:4_170:} 红影 发表于 2024-5-10 21:36
这个帘子刷新会变色，用了深色背景，怕变后看不见，加点光芒衬着防止把帘子弄没了
构思巧妙得很。{:4_199:} 马黑黑 发表于 2024-5-10 22:42
这些其实入了门后都是可以驾驭的，它其实就是HTML元素id唯一
嗯嗯，只要对应上，就能操控它了。 愤怒的葡萄 发表于 2024-5-11 05:53
非常不错，欣赏了。
谢谢葡萄，跟着学习的{:4_173:} 樵歌 发表于 2024-5-11 09:41
清风帘动月光来。好构图！
我也不知道是日光还是月光，反正是帘子遮了一下{:4_173:}