东方神韵精选（二）

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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: [msvg]
};
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[paths.length - 1].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>