学习黑黑老师的'干支为列'代码
本帖最后由 梦江南 于 2026-6-14 14:05 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://pan.suyanw.cn/view.php/2e93b8ba1c525fc3ac9493c09dc0dd79.gif') no-repeat center/cover; color: white; border-radius:32px;}
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#lrc { top: 4%; }
#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); } }
@keyframes move { to { stroke-dashoffset: -180; } }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/22776912/00/19/96/5f1954cfeafab_10s_big.mp4" autoplay loop mutedborder-radius:32px; ></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grd">
<stop offset="0" stop-color="red" />
<stop offset="0.15" stop-color="green" />
<stop offset="1" stop-color="yellow" />
</linearGradient>
</defs>
<symbol id="sb" viewBox="0 0 160 90">
<path d="M 1 25 C 40 10, 100 100, 150 45" />
</symbol>
<use href="#sb" x="0" y="0" />
<use href="#sb" x="50" y="0" />
<use href="#sb" x="100" y="0" />
</svg>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=3374663650', '干支为列']],
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
var aud = new AudPlayer(options);
});
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> https://pic.rmb.bdstatic.com/bjh/news/24aeb1bf233e25c2cfcfc00b540696f2.gif 也曾年轻 发表于 2026-6-14 08:54
问好老师，谢谢动图支持！{:4_180:} 本帖最后由 也曾年轻 于 2026-6-14 10:09 编辑 <br /><br /><style>
#svgObj {
fill: none;
stroke: url(#grd);
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 4 2;
stroke-dashoffset: 0;
opacity: .65;
animation: pMove 8s ease-in-out infinite alternate;
}
@keyframes pMove {
to {
stroke-dashoffset: -180;
}
}
</style>
<svg id="svgObj" viewBox="0 0 160 90">
<defs>
<linearGradient id="grd">
<stop offset="0" stop-color="red"></stop>
<stop offset="0.15" stop-color="green"></stop>
<stop offset="1" stop-color="yellow"></stop>
</linearGradient>
</defs>
<symbol id="pb" >
<path d='M0 45 C40 0 120 90 160 45 '></path>
</symbol>
<use href="#pb" x="0" y="0"></use>
<use href="#pb" x="5" y="5"></use>
<use href="#pb" x="10" y="10"></use>
</svg> 梦江南 发表于 2026-6-14 09:37
问好老师，谢谢动图支持！
曲线好玩些{:5_106:} 也曾年轻 发表于 2026-6-14 09:54
本帖最后由 也曾年轻 于 2026-6-14 10:09 编辑
#svgObj {
fill: none;
这曲线很赞，厉害！{:4_199:} 也曾年轻 发表于 2026-6-14 10:09
曲线好玩些
这曲线是很好玩的，好像是一种视觉上的错觉。 有特色，谢谢江南精彩分享{:4_204:} 杨帆 发表于 2026-6-14 11:00
有特色，谢谢江南精彩分享
问好杨帆，谢谢欣赏支持。{:4_180:} 也曾年轻 发表于 2026-6-14 09:54
本帖最后由 也曾年轻 于 2026-6-14 10:09 编辑
#svgObj {
fill: none;
这个再弄一弄，可以做成简单的波浪模拟 马黑黑 发表于 2026-6-14 12:40
这个再弄一弄，可以做成简单的波浪模拟
黑黑老师，已作了修正，变成波浪形了。 很漂亮的制作，欣赏学习，为你点赞~~{:4_204:}{:4_190:}
精美制作、赏心悦目。 霜染枫丹 发表于 2026-6-14 15:27
很漂亮的制作，欣赏学习，为你点赞~~
问好版主，谢谢欣赏支持。{:4_180:} 梦油 发表于 2026-6-14 16:54
精美制作、赏心悦目。
问好梦油，谢谢欣赏支持。{:4_180:} 漂亮，江南还修改了线条的形状，真赞{:4_187:}
暂停的时候波浪貌似不能停呢。 梦江南 发表于 2026-6-14 14:07
黑黑老师，已作了修正，变成波浪形了。
挺好看的 哇塞，太漂亮了，这个效果我也是很喜欢{:4_185:} 阿姨现在出来都是大手笔了，赞！{:4_178:} 红影 发表于 2026-6-14 19:44
漂亮，江南还修改了线条的形状，真赞
暂停的时候波浪貌似不能停呢。
问好影子，谢谢欣赏支持。祝新周快乐！{:4_204:}