暗夜舞者

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #mydiv {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         display: grid;
   
5.         place-items: center;
   
6.         width: 1024px;
   
7.         height: 640px;
   
8.         border: 1px solid gray;
   
9.         background: linear-gradient(to right bottom, rgba(100,100,var(--bb),.5) 0, rgba(calc(255 - var(--bb)),0,0,.35) 50%), url('https://638183.freep.cn/638183/t23/webp2/yewu.webp') no-repeat center/cover;
   
10.         overflow: hidden;
    
11.         position: relative;
    
12.         --state: running;
    
13. }
    
14. yin-fu {
    
15.         position: absolute;
    
16.         top: 140px;
    
17.         font: bold 30px sans-serif;
    
18.         opacity: 1;
    
19.         animation: fly 10s var(--delay) infinite var(--state);
    
20. }
    
21. @keyframes fly { to { transform: rotate(var(--deg)) translateY(-400px); opacity: 0; } }
    
22. </style>
    
23. 
    
24. <div id="mydiv"></div>
    
25. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950170789" loop autoplay></audio>
    
26. 
    
27. <script>
    
28. 
    
29. let script = document.createElement('script');
    
30. script.charset = 'utf-8';
    
31. script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
    
32. mydiv.appendChild(script);
    
33. 
    
34. let num = 0, step = 10;
    
35. let degAr = [120,-120,90,-90],
    
36.         yinfu = ['\u2669','\u266f','\u266d','\u266c','\u266b','\u266a','\u263d','\u263c','\u00a7','\u266e','\u266f'];
    
37. let geci = [[2,"暗夜舞者",4],[7,"",1]];
    
38. 
    
39. let flash = () => {
    
40.         num += step;
    
41.         if(num > 255 || num < 0) step = -step;
    
42.         mydiv.style.setProperty('--bb', num);
    
43. };
    
44. 
    
45. Array.from({length: 20}).forEach((item,key) => {
    
46.         item = document.createElement('yin-fu');
    
47.         let idx = Math.floor(Math.random() * yinfu.length);
    
48.         item.innerText = yinfu[idx];
    
49.         item.style.cssText += `
    
50.                 color: #${Math.random().toString(16).substr(-6)};
    
51.                 --deg: ${degAr[key % 4]}deg;/*${60 - Math.random() * 120}deg;*/
    
52.                 --delay: ${Math.random() * -10}s;
    
53.         `;
    
54.         mydiv.appendChild(item);
    
55. });
    
56. 
    
57. setInterval(()=> {
    
58.         if(aud.paused) return false;
    
59.         flash();
    
60. },10);
    
61. 
    
62. script.onload = () => {
    
63.         HCPlayer({
    
64.                 papa: '#mydiv',
    
65.                 lrcAr: geci,
    
66.                 lrc_css: 'top: 20px;',
    
67.                 fs_css: 'top: 210px; --bg: transparent;',
    
68.                 player_css: `
    
69.                         top: 100px;
    
70.                         border-width: 0;
    
71.                         color: #fff;
    
72.                         --size: 180px;
    
73.                         --bRad: 50%;
    
74.                         --track: gray;
    
75.                         --prog: orange;
    
76.                         --btnBg: linear-gradient(yellow, red);
    
77.                 `,
    
78.                 lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
    
79.         });
    
80. };
    
81. 
    
82. </script>
    

复制代码

小辣椒

可以回帖了？

小辣椒

变色背景加彩色小圆频谱，这个效果绝对可以直接套用玩

小辣椒

谢谢黑黑的精彩源码分享，今天上来及时的

马黑黑

小辣椒 发表于 2023-9-5 12:34
可以回帖了？

都可以都可以

马黑黑

小辣椒 发表于 2023-9-5 12:36
谢谢黑黑的精彩源码分享，今天上来及时的

刚做好

马黑黑

小辣椒 发表于 2023-9-5 12:34
可以回帖了？

忘了说明这个：

yinfu = ['\u2669','\u266f','\u266d','\u266c','\u266b','\u266a','\u263d','\u263c','\u00a7','\u266e','\u266f'];

上面这句，只有本论坛这么使用转换过的字符，在其他 UTF-8 编码的页面，请使用实体字符替代 \uxxxx

马黑黑

小辣椒 发表于 2023-9-5 12:35
变色背景加彩色小圆频谱，这个效果绝对可以直接套用玩

山人

JS代码头尾加：

(function() {

//JS代码

})();

梦油

五彩斑斓的灯光变幻令人感到欢快。

红影

这些飘飞的字符真美，画面也很动感。欣赏黑黑好帖

马黑黑

红影 发表于 2023-9-5 15:03
这些飘飞的字符真美，画面也很动感。欣赏黑黑好帖

感谢支持

马黑黑

醉美水芙蓉 发表于 2023-9-5 18:37
欣赏老师漂亮特效！

风中飞尘

这个小圆点  可以改成线条的样式么

红影

马黑黑 发表于 2023-9-5 17:48
感谢支持

这个音乐跟脚链的动感结合得特别好

千羽

好漂亮的播放器，变色的画面配上音乐很有看点，黑黑老师是最强大脑

马黑黑

千羽 发表于 2023-9-5 22:12
好漂亮的播放器，变色的画面配上音乐很有看点，黑黑老师是最强大脑

马黑黑

红影 发表于 2023-9-5 21:58
这个音乐跟脚链的动感结合得特别好

还可以