论坛 › 欢乐水吧 › 《待你》（学习黑黑《云》效果）

红影 发表于 2023-10-24 21:55

《待你》（学习黑黑《云》效果）

<style>
#mydiv {
        margin: 80px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 675px;
        box-shadow: 8px 8px 16px #000;
        background: #527785 url('https://pic.imgdb.cn/item/65371c57c458853aef61e57d.jpg') no-repeat center/cover;
        overflow: hidden;
        position: relative;
        display: grid;
        place-items: center;
}
#mydiv > svg { stroke-linecap: round; }
.cloud {
        position: absolute;
        left: 0;
        top: -200px;
        width: 260px;
        height: 40px;
        background: #000;
        border-radius: 20%;
        box-shadow:
                200px 360px 30px 20px rgba(255,255,255,.95),               
                120px 380px 30px rgba(211,211,211,.9);
        filter: url(#svg-cloud);
        animation: move 40s infinite ease-in-out alternate;
}
@keyframes move {
        from { transform: translateX(-60px); }
        to { transform: translateX(400px); }
}
#btnPlay { filter: hue-rotate(70deg); }
#vid { position: absolute; width: 100%; height: 100%;object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 0; opacity: 0.15; }
</style>

<div id="mydiv">
<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/17/90/V-179030-58108126.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<svg style="width: 0; height: 0; position: absolute;">
        <filter id="svg-cloud">
                <feTurbulence type="fractalNoise" baseFrequency="0.005" numOctaves="8" seed="20" result="turb"></feTurbulence>
                <feDisplacementMap in2="turb" in="SourceGraphic" scale="120" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
        </filter>
</svg>
        <div class="cloud"></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/09/10/c9978ff2ba014af20f54c1f6754da833.mp3" autoplay loop></audio>
</div>

<script>

(function() {
        let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
                js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';
        let loadJs = (url,callback) => {
                let body = document.querySelector('body'), jsNode = document.createElement('script');
                jsNode.charset = 'utf-8';
                jsNode.setAttribute('src', url);
                body.appendChild(jsNode);
                jsNode.onload = () => callback();
        };
        loadJs(js1, () => {
                HCPlayer({
                        papa: '#mydiv',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 20px;',
                        fs_css: 'left: -200px; background: transparent;',
                        player_css: 'width: 170px; height: 260px; left: 30px; bottom: 20px; ',
                        path: 'm160,30c6.59007,-9.91502 1.92275,-26.86289 -7.39638,-26.86289l-137.81772,0c-9.31913,0 -13.98645,16.94787 -7.39638,26.86289l66.38138,99.82174l0,89.71085l-17.36677,0c-6.85057,0 -12.40484,8.35268 -12.40484,18.65478c0,2.06135 1.11023,3.73096 2.48097,3.73096l74.42901,0c1.37073,0 2.48097,-1.6696 2.48097,-3.73096c0,-10.3021 -5.55427,-18.65478 -12.40484,-18.65478l-17.36677,0l0,-89.71085l66.38138,-99.82174z',
                        btn: {left: 20, top: 10},
                        track: {track: '#8FBC8F', prog: '#00FF00'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#mydiv',
                        total: 10,
                        size: {width: 30, height: 24},
                        shape: {background:'url("https://pic.imgdb.cn/item/65378567c458853aef7eb470.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toLeft',
                        maxTime: 30,
                        offset: {x: 0, y: -200},
                });
        });
})();

</script>

红影 发表于 2023-10-24 21:57

想模拟一朵和背景差不多的云，不太像。感谢@马黑黑 的代码{:4_187:}

红影 发表于 2023-10-24 21:58

从亦是金老师提供的地址里找了个酒杯，并跟着那个帖子的方法取得了路径。谢谢@亦是金 {:4_187:}

红影 发表于 2023-10-24 22:00

若是两朵云就要越过树木了，所以只弄了一朵晃悠一下{:4_173:}

红影 发表于 2023-10-24 22:01

酒杯貌似大了点，其实已经调小过，懒得再调了，为了装下按钮和播放时间，只能这样了。多喝点{:4_173:}

亦是金 发表于 2023-10-24 22:22

红影 发表于 2023-10-24 21:57
想模拟一朵和背景差不多的云，不太像。感谢@马黑黑 的代码

问好！欣赏红影精美帖子！{:4_187:}

冬天的雨 发表于 2023-10-24 22:26

美女漂亮的制作{:4_187:}

冬天的雨 发表于 2023-10-24 22:26

这个云动效果逼真，效果真漂亮{:4_178:}

亦是金 发表于 2023-10-24 22:26

本帖最后由 亦是金 于 2023-10-24 22:28 编辑

红影 发表于 2023-10-24 21:58
从亦是金老师提供的地址里找了个酒杯，并跟着那个帖子的方法取得了路径。谢谢@亦是金
客气了！应该感谢张鑫旭大侠分享的资源！{:4_189:}

冬天的雨 发表于 2023-10-24 22:28

酒杯路径也是有特色，整体效果特别好{:4_178:}

冬天的雨 发表于 2023-10-24 22:29

冬雨向美女学习，冬雨还不会做路径，刚抄了亦是金的笑脸路径{:4_170:}

亦是金 发表于 2023-10-24 22:31

云动画我还不会，抽的时间学习制作一个玩玩！{:4_189:}

红影 发表于 2023-10-24 22:58

亦是金 发表于 2023-10-24 22:22
问好！欣赏红影精美帖子！

谢谢亦是金老师的那个帖子，现在做路径太方便了{:4_187:}

红影 发表于 2023-10-24 22:59

冬天的雨 发表于 2023-10-24 22:26
美女漂亮的制作

谢谢冬小雨鼓励{:4_187:}

红影 发表于 2023-10-24 23:00

冬天的雨 发表于 2023-10-24 22:26
这个云动效果逼真，效果真漂亮

我照着背景里的云去模拟的，虽然不太像{:4_173:}

红影 发表于 2023-10-24 23:01

亦是金 发表于 2023-10-24 22:26
客气了！应该感谢张鑫旭大侠分享的资源！

那里的资源好丰富啊，想找什么都能找到呢。

冬天的雨 发表于 2023-10-24 23:02

红影 发表于 2023-10-24 22:59
谢谢冬小雨鼓励

美女客气了{:4_187:}

红影 发表于 2023-10-24 23:02

冬天的雨 发表于 2023-10-24 22:28
酒杯路径也是有特色，整体效果特别好

在亦是金老师分享的那个帖子里找的，那里好多的图形啊，做路径也特别方便。

冬天的雨 发表于 2023-10-24 23:03

红影 发表于 2023-10-24 23:00
我照着背景里的云去模拟的，虽然不太像

谁说不像，非常像{:4_189:}

红影 发表于 2023-10-24 23:03

冬天的雨 发表于 2023-10-24 22:29
冬雨向美女学习，冬雨还不会做路径，刚抄了亦是金的笑脸路径

在水吧的置顶里，冬小雨去看看，用那个做路径特别方便呢{:4_204:}

查看完整版本: 《待你》（学习黑黑《云》效果）