【黑师代码】奈何（学习黑师《久石譲 - 月光の雲海》水波滤镜效果）
<style>#mydiv {
margin: 0 0 0 calc(50% - 931px);
width: 1600px;
height: 900px;
top:130px;
background: url('https://pic.imgdb.cn/item/652d2ee7c458853aefe6b5d5.webp') no-repeat center top;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
}
#mydiv::before {
position: absolute;
content: '';
width: 100%;
height: 76%;
top: 1px;
background: inherit;
filter: url(#turb);
}
#mydiv > svg { stroke-linecap: round; }
.panda {
position: absolute;
width: 100%;
height: 100%;
top: 9%;
left: 10.7%;
cursor: pointer;
z-index: 2;
}
.myfilter { position: absolute; width: 0; height: 0; }</style><div id="mydiv"><div class="panda"><img src="https://pic.imgdb.cn/item/652d2a71c458853aefd8e468.png" alt="" /></div></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=2067118838" 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: 'bottom: 20px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); color: #fff;',
fs_css: 'left: -200px; background: transparent;',
player_css: 'width: 200px; height: 200px; right: 500px; bottom: 180px; background: url("https://pic.imgdb.cn/item/652d3893c458853aef08a9c3.png") no-repeat ',
path: 'M 12.5 100 Q 25 0 62.5 100 Q 100 200 137.5 100 Q 175 0 187.5 100',
btn: {left: 30, top: 20},
track: {track: 'SteelBlue', prog: ' CadetBlue'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#mydiv',
total: 80,
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>
<Br><Br><Br><Br><Br><Br><Br><Br> @马黑黑 老师之前的水波滤镜效果，再发来瞧瞧。。 月月这个帖子的效果很漂亮哦，月月也是花了时间的，做了二层图图，这个美女抠图漂亮{:4_199:} 下面的水动效果我也是很喜欢的 欣赏月月精彩的制作{:4_171:} 这个水波滤镜感觉效果都和原来不一样了呢，这个制作效果太棒了，给月儿点赞{:4_199:} 在黑黑的贴子里还感觉只是平动的波纹，在月儿的帖子里才看出来，原来是来回动的呢{:4_173:} 整天制作的色彩太美了，令人心旷神怡。月儿对美的把控非常到位{:4_199:} 水波纹挺不错的。
歌手，em
强悍制作，美的你不商量 醉美水芙蓉 发表于 2024-4-29 21:21
欣赏月儿的精美作品！
水妞来啦，问好啊。。{:4_187:} 醉美水芙蓉 发表于 2024-4-29 21:21
这图美得不要不要的！
哈哈，这话听了好开心。。{:4_187:} 小辣椒 发表于 2024-4-29 21:29
月月这个帖子的效果很漂亮哦，月月也是花了时间的，做了二层图图，这个美女抠图漂亮
小辣椒你厉害，看出来了。。
当时做完发现美人儿也被水波了。。
脸皱的没法看。。
只好又整个贴上去。。{:4_170:} 小辣椒 发表于 2024-4-29 21:30
下面的水动效果我也是很喜欢的
这个是黑老师的水波效果。我还用它做了另外一个贴子。效果也不错。。{:4_187:} 小辣椒 发表于 2024-4-29 21:30
欣赏月月精彩的制作
好哒，谢谢小辣椒的支持哈。。{:4_204:} 红影 发表于 2024-4-29 21:38
这个水波滤镜感觉效果都和原来不一样了呢，这个制作效果太棒了，给月儿点赞
把它整到天上去了，面积比较原来的大一些。。
{:4_173:} 红影 发表于 2024-4-29 21:40
在黑黑的贴子里还感觉只是平动的波纹，在月儿的帖子里才看出来，原来是来回动的呢
啊，代码是全模全样的抄过来的。。
可能在水里和在天上有明的和暗的关系吧。。
看来这个水波的确是很适合各种环境{:4_187:} 红影 发表于 2024-4-29 21:41
整天制作的色彩太美了，令人心旷神怡。月儿对美的把控非常到位
感谢影子认同哦，开心{:4_187:}