东方神韵精选（二）

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

马黑黑 发表于 2026-6-9 18:24

帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/dsfh.jpg') no-repeat center/cover; color: snow; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; top: 20%; right: 16%; 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/2269348/00/14/92/5e67af3447155.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="white"></stop>
            <stop offset="50%" stop-color="magenta"></stop>
            <stop offset="100" stop-color="red"></stop>
         </linearGradient>
   </defs>
   <g id="g1"></g>
</svg>
</div>

<script>
var options = {
   pa: '.pa',
   urls: [
         ['https://music.163.com/song/media/outer/url?id=5275056', '心神合一-洞箫/中音笙'],
         ['https://music.163.com/song/media/outer/url?id=5275057', '海上碧波-竹笛/古筝'],
         ['https://music.163.com/song/media/outer/url?id=5275058', '片片枫叶红-埙/扬琴'],
         ['https://music.163.com/song/media/outer/url?id=5275059', '思绪-中音笙/二胡'],
         ['https://music.163.com/song/media/outer/url?id=5275060', '眷恋-二胡/洞箫'],
         ['https://music.163.com/song/media/outer/url?id=5275061', '月落乌啼-曲笛/扬琴'],
         ['https://music.163.com/song/media/outer/url?id=5275062', '月光-二胡/中音笙'],
         ['https://music.163.com/song/media/outer/url?id=5275063', '梦幻-琵琶/女声/二胡'],
         ['https://music.163.com/song/media/outer/url?id=5275064', '相思对花眠-二胡/中音笙'],
         ['https://music.163.com/song/media/outer/url?id=5275065', '感悟-女声/二胡/扬琴']
   ],
   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 L-40 -190Q0 -100,40 -190 L0 0', 'transparent', 'snow', 3).addTo(g1).rotates(9);
   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-9 18:27

辅助小播的绘制原理和实现方法请移步：

一文讲清 SVG 动态绘图 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

杨帆发表于 2026-6-9 19:57

这样的小播很别致，这样的专辑很悦耳，这样的分享美美哒{:4_180:}

霜染枫丹 发表于 2026-6-9 20:43

马老师晚上好~~

又是一集好作品，继续收藏下载，很感谢您的无私分享！这些乐曲的选择不是随意，这一点很让我感动。很喜欢这些乐曲，辛苦了！祝您安好~~
{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-6-9 20:49

马黑黑发表于 2026-6-9 18:27
辅助小播的绘制原理和实现方法请移步：

您的绘图制作成视频以后，清除背景留下线条的运动，根据内容更换背景，很有意境，能够发挥很多联想，效果很别致

五边形的那个出图以后截图留存，可以作为不同的素材
{:4_199:}{:4_199:}{:4_178:}{:4_190:}

红影发表于 2026-6-9 22:39

这小播一点点绘制出来的，真漂亮{:4_187:}
这组语雀也极好听，欣赏黑黑好帖。

梦江南 发表于 2026-6-10 08:30

欣赏黑黑老师的精美制作，小播这样绘出来的，非常漂亮。{:4_187:}

梦江南 发表于 2026-6-10 08:32

黑黑老师，我用东方神韵精选（一）做了一帖回赠东篱老师的帖子，望黑黑老师指导。{:5_161:}

雨季工作室 发表于 2026-6-10 09:07

欣赏了，问好老师！

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

雨季工作室发表于 2026-6-10 09:07
欣赏了，问好老师！

感谢支持！晚上好！

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

梦江南发表于 2026-6-10 08:32
黑黑老师，我用东方神韵精选（一）做了一帖回赠东篱老师的帖子，望黑黑老师指导。

{:4_190:}

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

梦江南发表于 2026-6-10 08:30
欣赏黑黑老师的精美制作，小播这样绘出来的，非常漂亮。

感谢支持。晚上嚎！

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

红影发表于 2026-6-9 22:39
这小播一点点绘制出来的，真漂亮
这组语雀也极好听，欣赏黑黑好帖。

感谢感谢！晚上嚎啊！

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

霜染枫丹发表于 2026-6-9 20:49
您的绘图制作成视频以后，清除背景留下线条的运动，根据内容更换背景，很有意境，能够发挥很多联想，效果 ...

{:4_180:}

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

霜染枫丹发表于 2026-6-9 20:43
马老师晚上好~~

又是一集好作品，继续收藏下载，很感谢您的无私分享！这些乐曲的选择不是随意，这一点很 ...

辛苦！

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

杨帆发表于 2026-6-9 19:57
这样的小播很别致，这样的专辑很悦耳，这样的分享美美哒

{:4_191:}

梦江南 发表于 2026-6-10 20:27

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

黑黑老师不知为什么，9.10，不能点播一点就跳到其他歌曲去了。望指导！{:5_161:}

马黑黑 发表于 2026-6-10 20:33

梦江南发表于 2026-6-10 20:27
黑黑老师不知为什么，9.10，不能点播一点就跳到其他歌曲去了。望指导！

等下我看看

梦江南 发表于 2026-6-10 20:37

马黑黑发表于 2026-6-10 20:33
等下我看看

谢谢黑黑老师辛苦。晚上嚎！{:5_161:}

页: [1] 2

花潮论坛's Archiver

东方神韵精选（二）