东方神韵精选（三）

马黑黑 发表于 2026-6-10 21:19

马黑黑 发表于 2026-6-10 21:21

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/uy.webp') no-repeat center/cover; color: yellow; }
.player { width: 480px; bottom: 10px; }
.btnFs { bottom: 25px; left: 20px; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; bottom: 20px; right: 20px; opacity: 1; cursor: pointer; }
#msvg path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 2s var(--delay) forwards, fill 0.75s calc(var(--delay) + 2s) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill { to {fill: url(#grd); } }
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/79/71/60c86235ea083.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
   <title>播放/暂停(Alt+X)</title>
   <defs>
   <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
   <stop offset="0%" stop-color="red"></stop>
   <stop offset="50%" stop-color="orange"></stop>
   <stop offset="100%" stop-color="darkred"></stop>
   </linearGradient>
   </defs>
   <g id="g1"></g>
</svg>
</div>

<script>
var options = {
   pa: '.pa',
   urls: [
         ['https://music.163.com/song/media/outer/url?id=5275066', '夕阳山外山-扬琴/二胡'],
         ['https://music.163.com/song/media/outer/url?id=5275067', '晨曲-洞萧/二胡'],
         ['https://music.163.com/song/media/outer/url?id=5275068', '遥想-排萧/二胡'],
         ['https://music.163.com/song/media/outer/url?id=5275069', '秋-二胡/古筝'],
         ['https://music.163.com/song/media/outer/url?id=5275070', '檐下雨意-女声/二胡'],
         ['https://music.163.com/song/media/outer/url?id=5275071', '一叶轻舟-二胡/扬琴'],
         ['https://music.163.com/song/media/outer/url?id=5275072', '蔓延-女声/排萧'],
         ['https://music.163.com/song/media/outer/url?id=5275073', '静卧琴声里-埙']
   ],
   btns:
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
   loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});

function tzRun() {
   var aud = new AudPlayer(options);

   var dr = _dr(msvg);
   dr.path('M0 0 Q80 -180,-50 -190 Q0 -70,50 -190 Q-80 -180, 0 0', 'transparent', 'yellow', 3).addTo(g1).rotates(5);
   setProperties();

   function setProperties() {
         const paths = msvg.querySelectorAll('path');
         paths.forEach((path, idx) => {
            path.style.cssText += `
               --len: ${path.getTotalLength()};
               --delay: ${idx * 2.75}s;
            `;
         });
         paths.onanimationend = () => {
            setTimeout(() => { g1.classList.add('rotate'); }, 750);
         };
   }
}

function loadJs(url, callback) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = url;
   script.onload = function() {
         if (callback) callback();
   };
   document.head.appendChild(script);
}
</script>

霜染枫丹 发表于 2026-6-10 21:51

马老师晚上好~~我特别喜欢二胡的音色，细腻柔和，很有穿透力，特别抒情，悲凉哀怨能如泣如诉，温柔缱绻能诗情画意，欢快明亮嫩热情奔放。很感谢您的编辑分享，特别喜欢这组作品。祝您安好~~{:4_204:}{:4_190:}

马黑黑 发表于 2026-6-10 22:03

霜染枫丹发表于 2026-6-10 21:51
马老师晚上好~~我特别喜欢二胡的音色，细腻柔和，很有穿透力，特别抒情，悲凉哀怨能如泣如诉，温柔缱绻能诗 ...

民族乐器都非常出色

红影发表于 2026-6-10 22:16

又是一个有绘制过程的漂亮的小播，底图也好美。这组东方神韵好美啊{:4_187:}

红影发表于 2026-6-10 22:17

那首《檐下雨意》我听过，应该还有另外一个名字，对的，叫《无悔》，当时很为这音乐感动过{:4_204:}

霜染枫丹 发表于 2026-6-10 22:24

马黑黑发表于 2026-6-10 22:03
民族乐器都非常出色

我要把这三集都抱走，很喜欢听，而且对我用处很大。{:4_190:}

马黑黑 发表于 2026-6-10 22:29

霜染枫丹发表于 2026-6-10 22:24
我要把这三集都抱走，很喜欢听，而且对我用处很大。

{:4_191:}

马黑黑 发表于 2026-6-10 22:31

红影发表于 2026-6-10 22:16
又是一个有绘制过程的漂亮的小播，底图也好美。这组东方神韵好美啊

这是完结篇了

马黑黑 发表于 2026-6-10 22:31

红影发表于 2026-6-10 22:17
那首《檐下雨意》我听过，应该还有另外一个名字，对的，叫《无悔》，当时很为这音乐感动过

嗯，很经典的

霜染枫丹 发表于 2026-6-10 22:53

马黑黑发表于 2026-6-10 22:29

https://www.yueyijyw.com/forum.php?mod=viewthread&tid=1595

马黑黑 发表于 2026-6-10 23:18

霜染枫丹发表于 2026-6-10 22:53
https://www.yueyijyw.com/forum.php?mod=viewthread&tid=1595

{:4_180:}

梦江南 发表于 2026-6-11 12:37

这个小播放器还要好看，黑黑老师真的太厉害了。这么漂亮的小播放再去套一个。{:4_187:}

马黑黑 发表于 2026-6-11 12:43

梦江南发表于 2026-6-11 12:37
这个小播放器还要好看，黑黑老师真的太厉害了。这么漂亮的小播放再去套一个。

{:4_190:}

杨帆发表于 2026-6-11 14:34

视听盛宴，效果一流，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2026-6-11 20:50

杨帆发表于 2026-6-11 14:34
视听盛宴，效果一流，谢谢马老师精彩分享

{:4_180:}

小辣椒 发表于 2026-6-11 21:12

哇塞，黑黑的图图画出来的小播，太漂亮了

小辣椒 发表于 2026-6-11 21:13

都已经是第三个专辑播放器了{:4_199:}

小辣椒 发表于 2026-6-11 21:15

这种画出来的向播小辣椒不会，有时间就套用一个玩

小辣椒 发表于 2026-6-11 22:34

看了一圈，好像第一个专辑的小播简单方便一点{:4_170:}

页: [1] 2

花潮论坛's Archiver

东方神韵精选（三）