久石譲 - 月光の雲海

马黑黑

马黑黑

帖子代码：

1. <style>
   
2. #mydiv {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 644px;
   
6.         background: url('https://638183.freep.cn/638183/t23/2/004.jpg') no-repeat center bottom;
   
7.         box-shadow: 4px 4px 8px rgba(0,0,0,.75);
   
8.         overflow: hidden;
   
9.         position: relative;
   
10.         display: grid;
    
11.         place-items: center;
    
12. }
    
13. #mydiv::before {
    
14.         position: absolute;
    
15.         content: '';
    
16.         width: 100%;
    
17.         height: 16%;
    
18.         bottom: 1px;
    
19.         background: inherit;
    
20.         filter: url(#turb);
    
21. }
    
22. #mydiv > svg { stroke-linecap: round; }
    
23. .myfilter { position: absolute; width: 0; height: 0; }
    
24. </style>
    
25. 
    
26. <div id="mydiv"></div>
    
27. <svg class="myfilter">
    
28.     <filter id="turb" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
    
29.         <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence>
    
30.         <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
    
31.     </filter>
    
32. </svg>
    
33. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=442760" autoplay loop></audio>
    
34. 
    
35. <script>
    
36. 
    
37. (function() {
    
38.         let frames = 0, rad = Math.PI / 180;
    
39. 
    
40.         let lrcAr = [ [2.00,"久石譲 - 月光の雲海",2.5], [10.00,"",1] ];
    
41.         let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
    
42.                 js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    
43.         let loadJs = (url,callback) => {
    
44.                 let body = document.querySelector('body'), jsNode = document.createElement('script');
    
45.                 jsNode.charset = 'utf-8';
    
46.                 jsNode.setAttribute('src', url);
    
47.                 body.appendChild(jsNode);
    
48.                 jsNode.onload = () => callback();
    
49.         };
    
50.         loadJs(js1, () => {
    
51.                 HCPlayer({
    
52.                         papa: '#mydiv',
    
53.                         lrcAr: lrcAr,
    
54.                         lrc_css: 'top: 20px;',
    
55.                         fs_css: 'left: -200px; background: transparent;',
    
56.                         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',
    
57.                         path: 'M 100 5 Q 0 50, 100 100 T 195 100',
    
58.                         btn: {left: 60, top: 40},
    
59.                         track: {track: 'silver', prog: 'snow'},
    
60.                         img: {play: '', pause: ''}
    
61.                 });
    
62.         });
    
63. 
    
64.         loadJs(js2, () => {
    
65.                 H5lz({
    
66.                         papa: '#mydiv',
    
67.                         total: 60,
    
68.                         size: {width: 4, height: 4},
    
69.                         shape: {background: '#eee', borderRadius: ''},
    
70.                         ani: 'toBottom',
    
71.                         maxTime: 30,
    
72.                         offset: {x: -80, y: 0},
    
73.                 });
    
74.         });
    
75. 
    
76.         let fewave = () => {
    
77.                 let bfx = 0.01, bfy = 0.1;
    
78.                 frames += 0.5;
    
79.                 bfx += 0.002 * Math.cos(frames * rad);
    
80.                 bfy += 0.02 * Math.sin(frames * rad);
    
81.                 bf = [bfx, bfy];
    
82.                 feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
    
83.                 requestAnimationFrame(fewave);
    
84.         };
    
85. 
    
86.         fewave();
    
87. 
    
88. })();
    
89. 
    
90. </script>

复制代码

马黑黑

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

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

小辣椒

黑黑辛苦又一个自由路径播放器

小辣椒

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

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

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

马黑黑

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

马黑黑

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

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

红影

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

马黑黑

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

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

马黑黑

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

红影

这个帖子真很清静的感觉，制作真漂亮

红影

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

马黑黑

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

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

红影

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

好像有印象，不过那个没记住

红影

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

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

马黑黑

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

就是这两货的组合

马黑黑

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

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

红影

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

原来是这样，这水波和倒影都好美啊

红影

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

嗯嗯，太好了，等着黑黑的讲解