论坛 › 音乐沙龙 › 雨一直下

绿叶清舟 发表于 2024-5-29 21:17

雨一直下

<style>
    #papa { margin: 20px 0 20px calc(50% - 633px); width: 1100px; height: 700px; background: #2c2721; box-shadow: 3px 3px 6px rgba(0, 0, 0, .5); position: relative; }
    #mama { position: absolute; width: 100%; height: 100%; opacity: .85; }

    #background { display: none; }
    #player { position: absolute; left: calc(50% - 60px); bottom: 20px; cursor: pointer; z-index: 100; opacity: .85; animation: rot 10s linear infinite var(--state); }
    @keyframes rot { to { transform: rotate(1turn); } }
</style>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5243638" autoplay loop></audio>
<div id="papa">      
    <div id="mama"></div>
    <img id="player" src="https://gd-hbimg.huaban.com/c9d25697f016f04f6c07e5827df69b57f2e96f0b439f85-0PkV3x_fw658" width="100" height="100" alt="" />
</div>

<script>
    var engine;
    var sF = document.createElement('script');
    sF.src = 'https://638183.freep.cn/638183/web/js/rainyday.js';
    document.body.appendChild(sF);
    sF.onload = function() {
      var image = new Image();
      image.crossOrigin = 'anonymous';
      image.onload = function() {
            engine = new RainyDay({
                image: this,
                parentElement: mama,
            });
            var canv = document.querySelector('#papa canvas');
            canv.style.cssText += 'left: 0; top: 0';
            mState();
      };
      //图片地址（需支持跨域）
      image.src = 'https://pic.imgdb.cn/item/66571f96d9c307b7e94b5b6a.jpg';
   
      var mState = () => {
            papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
            aud.paused ? engine.pause() : engine.resume();
      };
      aud.onplaying = aud.onpause = () => mState();
      player.onclick = () => aud.paused ? aud.play() : aud.pause();
    };
</script>

马黑黑 发表于 2024-5-29 21:41

好制作

红影 发表于 2024-5-29 21:48

很朦胧的背景，很有内涵。文字设计漂亮，这个代码效果应用也很棒。
欣赏清舟好帖{:4_199:}

绿叶清舟 发表于 2024-5-29 21:51

马黑黑 发表于 2024-5-29 21:41
好制作

本来想加个视频的，可显示不出来

绿叶清舟 发表于 2024-5-29 21:52

红影 发表于 2024-5-29 21:48
很朦胧的背景，很有内涵。文字设计漂亮，这个代码效果应用也很棒。
欣赏清舟好帖

看到这效果想起这歌了

马黑黑 发表于 2024-5-29 21:53

绿叶清舟 发表于 2024-5-29 21:52
看到这效果想起这歌了

思路狭窄了

绿叶清舟 发表于 2024-5-29 21:56

马黑黑 发表于 2024-5-29 21:53
思路狭窄了

其他的音乐不好找啊

马黑黑 发表于 2024-5-29 21:57

绿叶清舟 发表于 2024-5-29 21:56
其他的音乐不好找啊

思路不开阔找啥都难的

梦油 发表于 2024-5-30 09:24

清舟朋友早晨好！小雨珠挺好看的。

红影 发表于 2024-5-30 22:34

绿叶清舟 发表于 2024-5-29 21:52
看到这效果想起这歌了

是的效果就是一直不停地往下滴落雨滴呢，跟现在窗外的场景一样。今天悲催，虽然预报有雨，一天没下，临近下班缺下雨了。

梦江南 发表于 2024-5-31 08:46

问好老师，今天就在下雨呢。赞！{:4_187:}

绿叶清舟 发表于 2024-6-1 20:41

马黑黑 发表于 2024-5-29 21:57
思路不开阔找啥都难的

老啦开不起来了

绿叶清舟 发表于 2024-6-1 20:42

梦油 发表于 2024-5-30 09:24
清舟朋友早晨好！小雨珠挺好看的。

梦油晚上好

绿叶清舟 发表于 2024-6-1 20:42

梦江南 发表于 2024-5-31 08:46
问好老师，今天就在下雨呢。赞！

江南晚上好，老师不敢当了

绿叶清舟 发表于 2024-6-1 20:43

红影 发表于 2024-5-30 22:34
是的效果就是一直不停地往下滴落雨滴呢，跟现在窗外的场景一样。今天悲催，虽然预报有雨，一天没下，临近 ...

接下来雨水会越来越多了

马黑黑 发表于 2024-6-1 21:00

绿叶清舟 发表于 2024-6-1 20:41
老啦开不起来了
望望窗外就行

绿叶清舟 发表于 2024-6-1 21:24

马黑黑 发表于 2024-6-1 21:00
望望窗外就行

窗外没人帮着开啊

马黑黑 发表于 2024-6-1 21:25

绿叶清舟 发表于 2024-6-1 21:24
窗外没人帮着开啊

去拼多多下个单

绿叶清舟 发表于 2024-6-1 21:28

马黑黑 发表于 2024-6-1 21:25
去拼多多下个单

这个也能下单的啊

马黑黑 发表于 2024-6-1 22:31

绿叶清舟 发表于 2024-6-1 21:28
这个也能下单的啊

没有什么不能的

查看完整版本: 雨一直下