论坛 › 欢乐水吧 › 烟雨江南（学习黑师《可是归人》水滴粒子效果）

南无月 发表于 2023-7-10 15:52

烟雨江南（学习黑师《可是归人》水滴粒子效果）

本帖最后由 南无月 于 2023-7-11 09:14 编辑 <br /><br /><style>#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: tan url('') no-repeat center / cover;
        box-shadow: 0 0 8px #000;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        --state: paused;
}
#papa::before {
        position: absolute;
        content: '\1F3F5';
        font: normal 60px/60px sans-serif;
        color: antiquewhite;
        cursor: pointer;
        left: calc(50% - 28px);
        bottom: 6px;
        animation: rot 6s infinite linear var(--state);
        pointer-events: auto;
        z-index: 103;
}       
       
.panda {
        position: absolute;
        width: 1024px;
        height: 640px;   
        z-index:102;
}               
#mydiv {
      margin: 20px auto;
      width: 1024px;
         height: 640px;
      overflow: hidden;
      position: relative;
      z-index:100;
      opacity: .96;
}

li-zi {
      position: absolute;
      background: linear-gradient(to bottom, transparent, snow);
      animation: drop var(--dur) var(--delay) infinite linear var(--state);
}
@keyframes drop { to { top: 100%; } }

#vid {
        position: absolute;
        width: 1024px;
        height: 100%;
        top:10px;
    right:2px;
        border-radius: 2%;
        opacity: .95;
        object-fit: cover;
        pointer-events: none;
        z-index: 2;
}
@keyframes rot { to { transform: rotate(360deg); } }</style><div id="papa"><div id="mydiv"></div><div class="panda"><img src="https://pic.imgdb.cn/item/64aab36f1ddac507ccce0f90.png" alt="" /></div><video id="vid" src="https://img.tukuppt.com/video_show/13839797/00/14/64/5e594433879a1.mp4" autoplay="" loop="" muted=""></video> </div> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1378916796" autoplay="autoplay" loop="loop"></audio><script>(function() {
                let canMove = true;
    class Lizi {
      constructor(pa) {
                this.pa = pa;
                this.size = {x: 20, y: 20};
                this.pos = {x: 10, y: 10};
                this.ele = document.createElement('li-zi');
      };
      //创建粒子
      creating() {
                this.ele.style.cssText = `
                        width: ${this.size.x}px;
                        height: ${this.size.y}px;
                        left: ${this.pos.x}px;
                        top: ${this.pos.y}px;
                `;
                this.pa.appendChild(this.ele);
      };
}

//实例化类
Array.from({length: 200}).forEach((element) => {
      element = new Lizi(mydiv);
      element.size = {
                x: 1 + Math.round(Math.random()),
                y: 4 + Math.random() * 16
      };
      element.pos = {
                x: Math.floor(Math.random() * mydiv.offsetWidth),
                y: 0
      };
      element.creating();
      element.ele.style.setProperty('--dur', 0.2 + Math.random() * 1.8 + 's');
      element.ele.style.setProperty('--delay', Math.random() * -0.6 + 's');
});

mydiv.onclick = () => {
      canMove = !canMove;
      mydiv.style.setProperty('--state', canMove ? 'running' : 'paused');
      console.log(canMove);
}

    mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),vid.pause(),canMove = false) : (papa.style.setProperty('--state','running'), vid.play(),canMove = true);
            aud.addEventListener('play', mState, false);
            aud.addEventListener('pause', mState, false);
        papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script>

红影 发表于 2023-7-10 17:57

月儿聪明，这么快就把那些气球变成雨滴了，太赞了{:4_199:}

红影 发表于 2023-7-10 17:59

这个边框好，就不用管视频上的LOGO了，自动被遮挡{:4_173:}

醉美水芙蓉 发表于 2023-7-10 18:23

樵歌 发表于 2023-7-10 18:46

美不胜收！{:4_178:}

千羽 发表于 2023-7-10 20:24

小桥流水烟雨人家，云里还飘来一漂亮的江南小姐姐，美景美人，美不胜收呢{:4_187:}

千羽 发表于 2023-7-10 20:27

美景还有特效呢，月儿学霸棒棒哒，必须喝彩送花花{:4_178:}{:4_199:}{:4_187:}

南无月 发表于 2023-7-11 09:16

红影 发表于 2023-7-10 17:57
月儿聪明，这么快就把那些气球变成雨滴了，太赞了

{:4_187:}谢谢影子鼓励哦，就是在完成作业

南无月 发表于 2023-7-11 09:17

红影 发表于 2023-7-10 17:59
这个边框好，就不用管视频上的LOGO了，自动被遮挡

{:4_181:}嗯嗯，这个LOGO一直头疼，这个贴子不用管它了

南无月 发表于 2023-7-11 09:17

醉美水芙蓉 发表于 2023-7-10 18:23
欣赏月儿好作品！

感谢水芙蓉支持哦{:4_187:}

南无月 发表于 2023-7-11 09:18

樵歌 发表于 2023-7-10 18:46
美不胜收！

谢谢樵管鼓励{:4_187:}

南无月 发表于 2023-7-11 09:19

千羽 发表于 2023-7-10 20:24
小桥流水烟雨人家，云里还飘来一漂亮的江南小姐姐，美景美人，美不胜收呢

千羽好哦，这个古风小视频色彩比较艳，就拿来当背景了{:4_173:}

南无月 发表于 2023-7-11 09:20

千羽 发表于 2023-7-10 20:27
美景还有特效呢，月儿学霸棒棒哒，必须喝彩送花花

{:4_183:}乐一个，一起开心

南无月 发表于 2023-7-11 09:21

@马黑黑 之前雨滴太胖，今天教程里的雨刚刚好，已换上。老师给瞧瞧。。。

红影 发表于 2023-7-11 16:48

南无月 发表于 2023-7-11 09:16
谢谢影子鼓励哦，就是在完成作业

看到月儿已经变成今天的雨滴了，跟背景视频更相融了呢{:4_187:}

红影 发表于 2023-7-11 16:49

南无月 发表于 2023-7-11 09:17
嗯嗯，这个LOGO一直头疼，这个贴子不用管它了

月儿找的视频很漂亮{:4_187:}

马黑黑 发表于 2023-7-11 18:58

有烟有雨。腻害的说{:4_199:}

南无月 发表于 2023-7-11 20:27

红影 发表于 2023-7-11 16:48
看到月儿已经变成今天的雨滴了，跟背景视频更相融了呢

看到这个雨滴更苗条，更接近现实，就换上了

南无月 发表于 2023-7-11 20:27

红影 发表于 2023-7-11 16:49
月儿找的视频很漂亮

感谢熊猫{:4_170:}

南无月 发表于 2023-7-11 20:28

马黑黑 发表于 2023-7-11 18:58
有烟有雨。腻害的说

听着象下雨抽烟的节奏{:4_170:}

查看完整版本: 烟雨江南（学习黑师《可是归人》水滴粒子效果）