论坛 › 音乐沙龙 › 《下雨了是我在想你》（套用黑黑《谷雨》效果）

红影 发表于 2024-5-8 21:56

《下雨了是我在想你》（套用黑黑《谷雨》效果）

<style>
    #papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: #68b9ac; box-shadow: 3px 3px 6px rgba(0, 0, 0, .5); position: relative;overflow: hidden; }
    #mama { position: absolute; width: 100%; height: 100%; }
    #background { display: none; }
    #player { position: absolute; right: 466px;; bottom: 368px; cursor: pointer; z-index: 100; opacity: .95; animation: rot 10s linear infinite var(--state); }
    #g1 { position: absolute; right: 100px; bottom: -20px; width: 490px; height: 700px; z-index: 100; }
    @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1970683097" autoplay loop></audio>
    <!-- mama是约束水珠的载体，它需要通过CSS设置为绝对定位 -->
    <div id="mama"></div>
    <img id="g1" src="https://pic.imgdb.cn/item/663b80dc0ea9cb1403cf3693.png" alt="" />
    <img id="player" src="https://638183.freep.cn/638183/small/4yc.png" width="60" height="60" 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/663b7c040ea9cb1403c81b9e.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-8 21:58

纯粹套用一个，没怎么理解同源，试了一下聚合图床的图片，原来也能用。是黑黑的代码已经调整好了的吧{:4_173:}

马黑黑 发表于 2024-5-8 23:12

红影 发表于 2024-5-8 21:58
纯粹套用一个，没怎么理解同源，试了一下聚合图床的图片，原来也能用。是黑黑的代码已经调整好了的吧{:4_17 ...

这个机制，帖子的代码里有了一句：

image.corssOrigin = 'anonymose';

这是使用匿名跨域读取图片的内在信息，只要图片来源的站点允许匿名读取就行。

我说的是另一种形式的rainyday调用：使用带背景图片的帖子容器或相关容器做 image 参数值，这个时候我们无法在帖子中声明跨域操作，需要图片与页面同源。

梦油 发表于 2024-5-9 09:22

玻璃窗上滚动的小水珠制作的很有意思。

红影 发表于 2024-5-9 11:09

马黑黑 发表于 2024-5-8 23:12
这个机制，帖子的代码里有了一句：

image.corssOrigin = 'anonymose';


原来黑黑讲解的是拓展知识，我理解错了，以为那个帖子里的就是呢{:4_173:}

红影 发表于 2024-5-9 11:09

梦油 发表于 2024-5-9 09:22
玻璃窗上滚动的小水珠制作的很有意思。

这些都是代码实现的呢，代码太厉害了{:4_173:}

马黑黑 发表于 2024-5-9 13:01

红影 发表于 2024-5-9 11:09
原来黑黑讲解的是拓展知识，我理解错了，以为那个帖子里的就是呢

看东西走马观花就是酱紫效果的{:4_170:}

小辣椒 发表于 2024-5-9 15:12

亲爱的，清新的画面色彩，打开帖就心情大好，美女好像有小心思，在低头琢磨，不知道这个是黑黑的什么效果，先去看看黑黑的教程分享

梦油 发表于 2024-5-9 16:48

红影 发表于 2024-5-9 11:09
这些都是代码实现的呢，代码太厉害了

黑黑劳苦功高。

红影 发表于 2024-5-9 20:12

马黑黑 发表于 2024-5-9 13:01
看东西走马观花就是酱紫效果的

迷糊的我，改不掉的粗心呢{:4_173:}

马黑黑 发表于 2024-5-9 20:13

红影 发表于 2024-5-9 20:12
迷糊的我，改不掉的粗心呢

正常，这是专家在非专业以外领域必备的素质

红影 发表于 2024-5-9 20:13

小辣椒 发表于 2024-5-9 15:12
亲爱的，清新的画面色彩，打开帖就心情大好，美女好像有小心思，在低头琢磨，不知道这个是黑黑的什么效果， ...

就是那个雨滴效果啊，黑黑的一个新效果呢{:4_173:}

红影 发表于 2024-5-9 20:14

梦油 发表于 2024-5-9 16:48
黑黑劳苦功高。

是啊，为我们打开一个神奇的新世界呢{:4_187:}

小辣椒 发表于 2024-5-9 21:39

红影 发表于 2024-5-9 20:13
就是那个雨滴效果啊，黑黑的一个新效果呢

亲爱的，下午后来去看了，这个是新的水滴效果，非常漂亮的

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

马黑黑 发表于 2024-5-9 20:13
正常，这是专家在非专业以外领域必备的素质

黑黑真会包装啊，连马虎都成高大上了{:4_170:}

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

小辣椒 发表于 2024-5-9 21:39
亲爱的，下午后来去看了，这个是新的水滴效果，非常漂亮的

是啊，非常真实又漂亮，晶莹剔透的。{:4_204:}

小辣椒 发表于 2024-5-9 21:49

红影 发表于 2024-5-9 21:48
是啊，非常真实又漂亮，晶莹剔透的。

代码的神奇真的妙不可言{:4_173:}

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

红影 发表于 2024-5-9 21:48
黑黑真会包装啊，连马虎都成高大上了

那是必须的

红影 发表于 2024-5-9 22:46

小辣椒 发表于 2024-5-9 21:49
代码的神奇真的妙不可言

是啊，让人觉得特别惊奇{:4_173:}

红影 发表于 2024-5-9 22:46

马黑黑 发表于 2024-5-9 21:53
那是必须的

包装也挺神奇的{:4_173:}

查看完整版本: 《下雨了是我在想你》（套用黑黑《谷雨》效果）