干支为列

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/gvwl.webp') no-repeat center/cover; color: white; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #lrc { top: 4%; }
   
7.     #msvg { width: 100%; height: 100%; use { fill: none; stroke: url(#grd); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 2; stroke-dashoffset: 0; opacity: .65; animation: move ease-in-out 8s infinite alternate var(--state); } }
   
8.     @keyframes move { to { stroke-dashoffset: -180; } }
   
9. </style>
   
10. 
    
11. <div id="pa" class="pa">
    
12.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/13928806/00/41/16/600e82baca629.mp4" autoplay loop muted></video>
    
13.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg">
    
14.         <defs>
    
15.                 <linearGradient id="grd">
    
16.                 <stop offset="0" stop-color="red" />
    
17.                 <stop offset="0.15" stop-color="green" />
    
18.                 <stop offset="1" stop-color="yellow" />
    
19.             </linearGradient>
    
20.             </defs>
    
21.             <symbol id="sb" viewBox="0 0 160 90">
    
22.                 <polyline points="2 2,30 88,150 10" />
    
23.             </symbol>
    
24.             <use href="#sb" x="0" y="0" />
    
25.             <use href="#sb" x="50" y="0" />
    
26.             <use href="#sb" x="100" y="0" />
    
27.     </svg>
    
28. </div>
    
29. 
    
30. <script>
    
31.     var options = {
    
32.         pa: '.pa',
    
33.         urls: [['https://music.163.com/song/media/outer/url?id=3374663650', '干支为列']],
    
34.     };
    
35. 
    
36.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
37.         var aud = new AudPlayer(options);
    
38.     });
    
39. 
    
40.     function loadJs(url, callback) {
    
41.         var script = document.createElement('script');
    
42.         script.charset = 'utf-8';
    
43.         script.src = url;
    
44.         script.onload = function() {
    
45.             if (callback) callback();
    
46.         };
    
47.         document.head.appendChild(script);
    
48.     }
    
49. </script>

复制代码

马黑黑

SVG特效详细说明请查阅：SVG内部图像自适应宽高的实现 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!


可以考虑将动画设置为其它样式，包括构图、动画形态，这需要想象力

梦江南

黑黑老师，这干支是中国古代用来纪年、纪月、纪日、纪时的天干地支组合系统，由十天干和十二地支循环配合形成六十年一周期的纪年法。吗？

梦江南

这也太玄酷了！

马黑黑

梦江南 发表于 2026-6-13 08:14
黑黑老师，这干支是中国古代用来纪年、纪月、纪日、纪时的天干地支组合系统，由十天干和十二地支循环配合形 ...

音乐等文艺作品的创作思路可以来源于生活、历史、文化等诸多领域，它命名为干支，灵感自然源于中国古代文化。

马黑黑

梦江南 发表于 2026-6-13 08:16
这也太玄酷了！

SVG+视频的特效结合了歌曲寓意，以抽象的方式演绎中华文明的源远流长和对中华儿女的美好指引

梦江南

马黑黑 发表于 2026-6-13 09:37
音乐等文艺作品的创作思路可以来源于生活、历史、文化等诸多领域，它命名为干支，灵感自然源于中国古代文 ...

我是想可能就是这个干支了。

梦江南

马黑黑 发表于 2026-6-13 09:39
SVG+视频的特效结合了歌曲寓意，以抽象的方式演绎中华文明的源远流长和对中华儿女的美好指引

黑黑老师厉害。