|
|

楼主 |
发表于 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 = [ [2.00,"久石譲 - 月光の雲海",2.5], [10.00,"",1] ];
- 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 = [bfx, bfy];
- feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
- requestAnimationFrame(fewave);
- };
- fewave();
- })();
- </script>
复制代码
|
|