马黑黑 发表于 2023-10-16 17:40

久石譲 - 月光の雲海

本帖最后由 马黑黑 于 2023-10-16 17:46 编辑 <br /><br /><style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 644px;
        background: url('https://638183.freep.cn/638183/t23/2/004.jpg') no-repeat center bottom;
        box-shadow: 4px 4px 8px rgba(0,0,0,.75);
        overflow: hidden;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#mydiv::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 16%;
        bottom: 1px;
        background: inherit;
        filter: url(#turb);
}
#mydiv > svg { stroke-linecap: round; }
.myfilter { position: absolute; width: 0; height: 0; }
</style>

<div id="mydiv"></div>
<svg class="myfilter">
    <filter id="turb" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
      <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence>
      <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
    </filter>
</svg>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=442760" autoplay loop></audio>

<script>

(function() {
        let frames = 0, rad = Math.PI / 180;

        let lrcAr = [ , ];
        let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
                js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.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: 200px; height: 200px; left: 2px; bottom: 2px; background: url("https://638183.freep.cn/638183/t23/btn/hshx.png") no-repeat 35px 35px',
                        path: 'M 100 5 Q 0 50, 100 100 T 195 100',
                        btn: {left: 60, top: 40},
                        track: {track: 'silver', prog: 'snow'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#mydiv',
                        total: 60,
                        size: {width: 4, height: 4},
                        shape: {background: '#eee', borderRadius: ''},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: -80, y: 0},
                });
        });

        let fewave = () => {
                let bfx = 0.01, bfy = 0.1;
                frames += 0.5;
                bfx += 0.002 * Math.cos(frames * rad);
                bfy += 0.02 * Math.sin(frames * rad);
                bf = ;
                feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
                requestAnimationFrame(fewave);
        };

        fewave();

})();

</script>

马黑黑 发表于 2023-10-16 17:41

帖子代码：
<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 644px;
        background: url('https://638183.freep.cn/638183/t23/2/004.jpg') no-repeat center bottom;
        box-shadow: 4px 4px 8px rgba(0,0,0,.75);
        overflow: hidden;
        position: relative;
        display: grid;
        place-items: center;
}
#mydiv::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 16%;
        bottom: 1px;
        background: inherit;
        filter: url(#turb);
}
#mydiv > svg { stroke-linecap: round; }
.myfilter { position: absolute; width: 0; height: 0; }
</style>

<div id="mydiv"></div>
<svg class="myfilter">
    <filter id="turb" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
      <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence>
      <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
    </filter>
</svg>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=442760" autoplay loop></audio>

<script>

(function() {
        let frames = 0, rad = Math.PI / 180;

        let lrcAr = [ , ];
        let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
                js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.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: 200px; height: 200px; left: 2px; bottom: 2px; background: url("https://638183.freep.cn/638183/t23/btn/hshx.png") no-repeat 35px 35px',
                        path: 'M 100 5 Q 0 50, 100 100 T 195 100',
                        btn: {left: 60, top: 40},
                        track: {track: 'silver', prog: 'snow'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#mydiv',
                        total: 60,
                        size: {width: 4, height: 4},
                        shape: {background: '#eee', borderRadius: ''},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: -80, y: 0},
                });
        });

        let fewave = () => {
                let bfx = 0.01, bfy = 0.1;
                frames += 0.5;
                bfx += 0.002 * Math.cos(frames * rad);
                bfy += 0.02 * Math.sin(frames * rad);
                bf = ;
                feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
                requestAnimationFrame(fewave);
        };

        fewave();

})();

</script>

马黑黑 发表于 2023-10-16 17:44

帖子图片复用之前帖子的图片。

帖子底部的轻微动态效果通过 svg 滤镜实现，由 JS 驱动，未设置暂停功能。

小辣椒 发表于 2023-10-16 18:23

黑黑辛苦又一个自由路径播放器{:4_199:}

小辣椒 发表于 2023-10-16 18:25

马黑黑 发表于 2023-10-16 17:44
帖子图片复用之前帖子的图片。

帖子底部的轻微动态效果通过 svg 滤镜实现，由 JS 驱动，未设置暂停功能 ...

滤镜效果我还是不懂，刚做了个播放器的效果，滤镜修改颜色我不明白，又瞎捣鼓了一个{:4_170:}

马黑黑 发表于 2023-10-16 18:58

小辣椒 发表于 2023-10-16 18:25
滤镜效果我还是不懂，刚做了个播放器的效果，滤镜修改颜色我不明白，又瞎捣鼓了一个

{:4_190:}

马黑黑 发表于 2023-10-16 18:59

小辣椒 发表于 2023-10-16 18:23
黑黑辛苦又一个自由路径播放器

这个，你只需要做个路径就成了

醉美水芙蓉 发表于 2023-10-16 19:14

红影 发表于 2023-10-16 20:53

这滤镜效果好像还没讲过吧，看着很陌生，但效果很漂亮{:4_199:}

马黑黑 发表于 2023-10-16 20:55

红影 发表于 2023-10-16 20:53
这滤镜效果好像还没讲过吧，看着很陌生，但效果很漂亮

以前讲过，只是不是专门介绍滤镜

马黑黑 发表于 2023-10-16 20:55

醉美水芙蓉 发表于 2023-10-16 19:14
svg 滤镜动态效果不错！svg 滤镜不懂，谢谢黑黑老师分享！

{:4_190:}

红影 发表于 2023-10-16 20:57

这个帖子真很清静的感觉，制作真漂亮{:4_187:}

红影 发表于 2023-10-16 20:58

黑黑先把这个svg滤镜效果弄到帖子了，是证明它的强大，吸引大家更好地去学习它吧{:4_173:}

马黑黑 发表于 2023-10-16 21:15

红影 发表于 2023-10-16 20:58
黑黑先把这个svg滤镜效果弄到帖子了，是证明它的强大，吸引大家更好地去学习它吧

这个以前用过的，那是应该是做云的效果

红影 发表于 2023-10-16 23:30

马黑黑 发表于 2023-10-16 21:15
这个以前用过的，那是应该是做云的效果

好像有印象，不过那个没记住{:4_173:}

红影 发表于 2023-10-16 23:34

马黑黑 发表于 2023-10-16 20:55
以前讲过，只是不是专门介绍滤镜

好像以前还有个边缘腐蚀效果？我忘记是不是这个名了{:4_173:}

马黑黑 发表于 2023-10-16 23:59

红影 发表于 2023-10-16 23:34
好像以前还有个边缘腐蚀效果？我忘记是不是这个名了

就是这两货的组合

马黑黑 发表于 2023-10-16 23:59

红影 发表于 2023-10-16 23:30
好像有印象，不过那个没记住

它很复杂。我正在考虑写一个容易理解的介绍短文。

红影 发表于 2023-10-17 20:10

马黑黑 发表于 2023-10-16 23:59
就是这两货的组合

原来是这样，这水波和倒影都好美啊{:4_187:}

红影 发表于 2023-10-17 20:11

马黑黑 发表于 2023-10-16 23:59
它很复杂。我正在考虑写一个容易理解的介绍短文。

嗯嗯，太好了，等着黑黑的讲解{:4_187:}
页: [1] 2
查看完整版本: 久石譲 - 月光の雲海