月亮女儿
本帖最后由 杨帆 于 2026-6-8 15:14 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="preload" href="https://cccimg.com/view.php/2c2334bf5d7804d9ca358b78bbe921e0.gif" as="image">
<title>月亮女儿</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa {display: grid; place-items: center; width:1280px; height:780px; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); position: relative; background:url(https://638183.freep.cn/638183/t24/w8/aj.webp) no-repeat center/cover; box-shadow:4px 4px 16px rgba(0,0,0,0.5); overflow:hidden; border-radius: 20px; z-index: 1;}
#bg {position:absolute; object-fit:cover; inset: 0; width: 100%; height: 100%; z-index:2; pointer-events:none;}
.player-controls {position:absolute; display:flex; justify-content:center; align-items:center; gap:15px; bottom:30px; left: calc(50%); transform: translateX(-50%); min-width:50%; z-index:10; background: rgba(0,0,0,0.1); backdrop-filter: blur(1px); padding: 8px 20px; border-radius: 60px; width: auto; white-space: nowrap; animation:glowPulse 1.5s infinite ease-in-out;}
.play-btn {width:38px; height:38px; border:1px solid rgba(255,255,255,0.9); border-radius:50%; position:relative; cursor:pointer; background: rgba(0,0,0,0.3); transition: 0.2s;}
.play-btn:hover {transform: scale(1.05); background: rgba(0,0,0,0.6);}
.play-btn::before {content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; background:#fff;}
.play-btn.play::before {clip-path:polygon(0 0,0 100%,100% 50%); margin-left: 2px;}
.play-btn.pause::before {clip-path:polygon(20% 0,20% 100%,40% 100%,40% 0,60% 0,60% 100%,80% 100%,80% 0); background:#fff;}
.progress-bar {flex:1; height:4px; background: rgba(255,255,255,0.3); border-radius: 10px; cursor: pointer; position: relative; box-shadow: inset 0 0 2px rgba(0,0,0,0.2);}
.progress-fill {position: absolute; left:0; top:0; height:100%; width: var(--progress, 0%); background: linear-gradient(90deg, #FFD966, #FF8C42); border-radius: 10px; pointer-events: none;}
.thumb {position: absolute; left: calc(var(--progress, 0%) - 6px); top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: white; border: 2px solid #FF8C42; border-radius: 50%; cursor: url("https://cnup.cnzv.cc/view.php/ZjE2ZQ.png"), auto; box-sizing: border-box; box-shadow: 0 0 6px rgba(0,0,0,0.3); transition: transform 0.05s ease; z-index: 5;}
.time-display {color:#fff; font-size:14px; font-family: monospace; background: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 30px; letter-spacing: 1px;}
.vid{position:absolute;z-index:2;inset:0;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;object-position:center;mix-blend-mode: multiply;mask: linear-gradient(to bottom, transparent 58%,red 60%);-webkit-mask: linear-gradient(to bottom, transparent 58%,red 60%);}
.scroller-container { position: absolute; width: 100%; height: 100%; overflow: visible; z-index: 3; left: calc(50%); transform: translateX(-50%); top: 20%; animation: scroll 60s ease-in-out infinite; }
@keyframes scroll {0%{transform: translateX(0);}25%{transform: translateX(calc(50vw + 1%));}75%{transform: translateX(calc(-100vw + 8%));}100%{transform: translateX(0);}}
#vid {position:relative;width:40%;height:30%; border-radius:50%;object-fit:cover;border:2px solid rgba(255,215,0,0.7);box-shadow:0 0 20px rgba(0,0,0,0.5);overflow:hidden;opacity:.95;z-index:5;transition:opacity .3s;animation: floatGlow 8s infinite alternate; cursor:pointer;}
@keyframes floatGlow {0%{transform: translateY(0px) scale(1); box-shadow: 0 0 5px gold;}100%{transform: translateY(-12px) scale(1.02); box-shadow: 0 0 25px #ffaa44;}}
#wrapper {position: absolute; padding: 10px 20px; font-weight:800; font-size:3.2em; font-family:"Long Cang",KaiTi,"Liu Jian Mao Cao","ZCOOL QingKe HuangYou",STKaiti,SimHei,cursive, serif; filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0); width: 90%; height: auto; left: 50%; transform: translateX(-50%); z-index: 12; text-align: center; top: 5%; white-space: nowrap; pointer-events: none; background: none; border-radius: 80px; overflow: hidden;}
.char {display: inline-block; padding: 6px 8px; opacity: 0; transform: translate(var(--x), var(--y)) rotate(-720deg) scale(1); animation: fadeInMagic 0.8s var(--delay) forwards, shimmer 1.2s infinite alternate; text-shadow: 0 0 1px currentColor;}
@keyframes fadeInMagic {100%{transform: translate(0, 0) rotate(0deg) scale(1.2); opacity: 1;}}
@keyframes shimmer {100%{filter: brightness(2); drop-shadow(0 0 2px gold);}}
#fullscreen {position:absolute;top:3%;left:3%;font:normal 1.3em '楷体', 'Ma Shan Zheng';color:#fff;background: rgba(0,0,0,0.4);backdrop-filter: blur(4px);padding: 6px 14px;border-radius: 40px;cursor:pointer;z-index:98;transition:0.2s;}
#fullscreen:hover {background:#ffb347; color:#1e2a3a; transform: scale(0.96);}
#canvas {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index:3; pointer-events: none; animation: gentleFloat 3s infinite alternate;background: linear-gradient(135deg, rgba(100,200,255,0.3), rgba(0,100,200,0.5));
}
@keyframes gentleFloat {0%{transform: translateY(2px); opacity: 0.7;}100%{transform: translateY(-4px); opacity: 1;}}
@keyframes glowPulse{0%{box-shadow:0 0 5px rgba(255,215,0,0.4),0 0 10px rgba(255,200,0,0.2); border-color:rgba(255,215,0,0.5);}50%{box-shadow:0 0 20px rgba(255,215,0,0.8),0 0 25px rgba(255,180,0,0.6); border-color:rgba(255,215,0,0.9);}100%{box-shadow:0 0 5px rgba(255,215,0,0.4),0 0 10px rgba(255,200,0,0.2);}}
.dancer{ position: absolute; width:480px; height:270px;mix-blend-mode: screen;z-index:3;opacity: 0;animation: scale 1s ease infinite alternate;
}
@keyframes scale {0%{transform:scale(1);} 100%{transform:scale(1.1);}}
</style>
</head>
<body>
<div id="papa">
<canvas id="canvas"></canvas>
<img class="dancer" src="https://pic1.imgdb.cn/item/6a224c386cb4776548547bc8.gif" alt="" style="left:-5%; top:10%;">
<span id="fullscreen">全屏欣赏</span>
<div class="scroller-container">
<video id="vid" src="http://cccimg.com/view.php/71d7428b4cf920ee1f691659faf90997.mp4" autoplay preload="auto" loop muted></video>
</div>
<div id="testImg" ><div id="wrapper"></div></div>
<div class="player-controls">
<div class="play-btn pause" id="playBtn"></div>
<div class="progress-bar" id="progressBar" title = "调节进度">
<div class="progress-fill" style="width:0%"></div>
<div class="thumb"></div>
</div>
<div class="time-display" id="timeDisplay">00:00 / 00:00</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5267559.mp3" autoplay loop></audio>
<img id="bg" src="https://cccimg.com/view.php/2c2334bf5d7804d9ca358b78bbe921e0.gif">
<video class="vid" src="https://www.llz123.net/llz/llz/mulu/tongnian/yu1.mp4" preload="auto" autoplay loop muted></video>
</div>
<script>
const animList = [];
const animatedElements = document.querySelectorAll('#papa, .scroller-container, #vid, #wrapper, .player-controls, #canvas');
animatedElements.forEach(el => {
animList.push(...el.getAnimations());
});
const lrcText = `月亮女儿 - 张燕
月亮女儿
词：浮克
曲：浮克
演唱：张燕
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
啊唉 啊唉 啊唉
清凉凉的水啊
流过我的家
那水中的鱼儿你说一说话吧
说一说这季节是怎样变化
说一说这母亲是怎样牵挂
说一说这女儿是怎样
一天天长大
唉 呀依唉 呀依唉 依唉唉
唉 呀依唉 依唉 依唉
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
踩过一个秋
再亲过一季雪花
做一个梦就可以梦到她
天上的月儿照着我的家
那月中的人儿请望一望吧
望一望这思念的尽头是什么
望一望这愿望我何时到达
望一望这梦想有多远
天空究竟有多大
唉 呀依唉 呀依唉 依唉唉
唉 呀依唉 依唉 依唉
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
踩过一个秋
再亲过一季雪花
做一个梦就可以梦到她
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
踩过一个秋
再亲过一季雪花
做一个梦就可以梦到她
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
踩过一个秋
再亲过一季雪花
做一个梦就可以梦到她
`;
function parseLrc(text) {
let arr = [];
const lines = text.split('\n');
const reg = /\[(\d+):(\d+)(?:\.(\d+))?\](.*)/;
for (let line of lines) {
const match = line.match(reg);
if (match) {
let minutes = parseInt(match);
let seconds = parseInt(match);
let mills = match ? parseInt(match) : 0;
let totalSec = minutes * 60 + seconds + mills / 1000;
arr.push(.trim()]);
}
}
return arr.length ? arr : [];
}
const gcAr = parseLrc(lrcText);
let curkey = 0, isSeeking = false, isDragging = false;
const aud = document.getElementById('aud');
const playBtn = document.getElementById('playBtn');
const progressBar = document.getElementById('progressBar');
const progressFill = document.querySelector('.progress-fill');
const thumb = document.querySelector('.thumb');
const timeDisplay = document.getElementById('timeDisplay');
const wrapper = document.getElementById('wrapper');
const bgImg = document.getElementById('bg');
const vids = document.querySelectorAll('video');
const vidEl = document.querySelector('#vid');
const canvas = document.getElementById('canvas');
const playerControls = document.querySelector('.player-controls');
const scrollerContainer = document.querySelector('.scroller-container');
const dancer = document.querySelector('.dancer');
function formatTime(sec) {
if (isNaN(sec)) return "00:00";
let m = Math.floor(sec / 60);
let s = Math.floor(sec % 60);
return `${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
}
function updateProgressUI(percent) {
percent = Math.min(100, Math.max(0, percent));
progressBar.style.setProperty('--progress', percent + '%');
if (progressFill) progressFill.style.width = percent + '%';
}
function syncPlayState() {
if (!bgImg) return;
bgImg.src = aud.paused
? 'https://cccimg.com/view.php/1341c70fe37da1d7a32b9a3ac15ed8e9.png'
: 'https://cccimg.com/view.php/2c2334bf5d7804d9ca358b78bbe921e0.gif';
}
function showLrc(line, container, durationSec = 3.5) {
if (isSeeking) return;
isSeeking = true;
if (!container) return;
container.innerHTML = '';
const chars = line.split('').map(ch => ch === ' ' ? '\u00A0' : ch);
const fragment = document.createDocumentFragment();
chars.forEach((ch, idx) => {
const span = document.createElement('span');
span.textContent = ch;
span.classList.add('char');
const randomX = (Math.random() - 0.5) * 700;
const randomY = (Math.random() > 0.7 ? -300 : Math.random() * 60);
const hue = Math.floor(Math.random() * 360);
span.style.cssText = `
color: hsl(${hue}, 85%, 65%);
--x: ${randomX}px;
--y: ${randomY}px;
--delay: ${(idx * 0.02) + Math.random() * 0.2}s;
`;
fragment.appendChild(span);
});
container.appendChild(fragment);
document.querySelectorAll('.char').forEach(c => {
animList.push(...c.getAnimations());
});
const safeDuration = Math.min(durationSec, 5.5);
setTimeout(() => {
isSeeking = false;
}, safeDuration * 1000);
}
function calcCurrentKey() {
let idx = 0;
for (let i = 0; i < gcAr.length; i++) {
if (aud.currentTime < gcAr) {
idx = Math.max(0, i - 1);
break;
}
idx = i;
}
curkey = idx;
}
function triggerLrcByTime() {
if (isDragging) return;
if (curkey >= gcAr.length - 1) return;
if (aud.currentTime >= gcAr) {
const nextTime = (gcAr && gcAr) || (gcAr + 4);
const gap = nextTime - gcAr;
showLrc(gcAr, wrapper, gap);
curkey++;
}
}
function togglePlayPause() {
aud.paused ? aud.play() : aud.pause();
if (aud.paused) {
animList.forEach(anim => anim.pause());
playBtn.className = 'play-btn play';
vidEl.title = playBtn.title ="播放" ;
dancer.style.opacity = '0';
} else {
animList.forEach(anim => anim.play());
playBtn.className = 'play-btn pause';
vidEl.title = playBtn.title ="暂停";
dancer.style.opacity = document.fullscreenElement ? '1' : '0';
}
syncPlayState();
}
playBtn.onclick = togglePlayPause;
vidEl.onclick = () => playBtn.click();
vidEl.title = playBtn.title = "暂停" ;
aud.addEventListener('ended', () => {
curkey = 0;
aud.currentTime = 0;
aud.play();
});
aud.addEventListener('timeupdate', () => {
if (isDragging) return;
if (!aud.duration || isNaN(aud.duration)) return;
const percent = (aud.currentTime / aud.duration) * 100;
updateProgressUI(percent);
timeDisplay.textContent = `${formatTime(aud.currentTime)} / ${formatTime(aud.duration)}`;
if (!isSeeking) triggerLrcByTime();
});
aud.addEventListener('seeked', () => {
if (!isDragging) {
const percent = (aud.currentTime / aud.duration) * 100;
updateProgressUI(percent);
}
calcCurrentKey();
if (gcAr && !isSeeking) {
const nextT = (gcAr?. || aud.currentTime + 3);
showLrc(gcAr, wrapper, nextT - gcAr);
}
});
if (thumb) {
thumb.addEventListener('click', (e) => {
e.stopPropagation();
});
thumb.addEventListener('mousedown', (e) => {
e.preventDefault();
e.stopPropagation();
isDragging = true;
document.body.style.cursor = 'grabbing';
document.body.style.userSelect = 'none';
});
}
progressBar.addEventListener('click', (e) => {
if (e.target === thumb) return;
const rect = progressBar.getBoundingClientRect();
let x = e.clientX - rect.left;
x = Math.min(Math.max(0, x), rect.width);
const percent = x / rect.width;
const newTime = percent * aud.duration;
if (isFinite(newTime)) {
isDragging = true;
updateProgressUI(percent * 100);
aud.currentTime = newTime;
setTimeout(() => { isDragging = false; }, 50);
}
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const rect = progressBar.getBoundingClientRect();
let x = e.clientX - rect.left;
x = Math.min(Math.max(0, x), rect.width);
const percent = x / rect.width;
updateProgressUI(percent * 100);
if (aud.duration && isFinite(aud.duration)) {
aud.currentTime = percent * aud.duration;
}
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
document.body.style.cursor = '';
document.body.style.userSelect = '';
if (aud.duration) {
const finalPercent = (aud.currentTime / aud.duration) * 100;
updateProgressUI(finalPercent);
}
}
});
progressBar.addEventListener('dragstart', (e) => e.preventDefault());
const ctx = canvas.getContext('2d');
let canvasW, canvasH;
function drawCanvasText() {
if (!ctx) return;
const papaRect = document.getElementById('papa');
if (!papaRect) return;
canvasW = papaRect.offsetWidth;
canvasH = papaRect.offsetHeight;
canvas.width = canvasW;
canvas.height = canvasH;
const grad = ctx.createLinearGradient(0, canvasH*0.7, canvasW*0.8, canvasH);
grad.addColorStop(0, 'rgba(0,0,0,0.1)');
grad.addColorStop(1, 'rgba(255,215,0,0.15)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvasW, canvasH);
ctx.save();
ctx.shadowBlur = 18;
ctx.shadowColor = '#f5b042';
ctx.font = `bold ${Math.min(58, canvasW/12)}px "Ma Shan Zheng","Long Cang","ZCOOL KuaiLe",cursive`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const gradientText = ctx.createLinearGradient(canvasW*0.3, 0, canvasW*0.7, 0);
gradientText.addColorStop(0, '#FFF9E6');
gradientText.addColorStop(0.6, '#FFD966');
gradientText.addColorStop(1, '#FFB347');
ctx.fillStyle = gradientText;
ctx.fillText('月亮女儿', canvasW/2, canvasH * 0.78);
ctx.font = `28px "Long Cang", cursive`;
ctx.fillStyle = 'rgba(255,240,180,0.9)';
ctx.shadowBlur = 6;
ctx.fillText('· 经典传唱，情怀载体 ·', canvasW/2, canvasH * 0.85);
ctx.restore();
}
let resizeObs = null;
function initCanvasResize() {
drawCanvasText();
window.addEventListener('resize', () => { drawCanvasText(); });
if (window.ResizeObserver) {
resizeObs = new ResizeObserver(() => drawCanvasText());
const papa = document.getElementById('papa');
if (papa) resizeObs.observe(papa);
}
}
document.fonts.ready.then(() => drawCanvasText());
initCanvasResize();
aud.onplay = () => { vids.forEach(v => v.play().catch(e=>console.log)); };
aud.onpause = () => { vids.forEach(v => v.pause()); };
aud.addEventListener('loadedmetadata', () => {
calcCurrentKey();
if (gcAr) showLrc(gcAr, wrapper, 3);
});
setTimeout(() => {
if (aud.readyState >= 1) {
calcCurrentKey();
if (gcAr) showLrc(gcAr, wrapper, 3);
updateProgressUI((aud.currentTime/aud.duration)*100 || 0);
}
}, 300);
let fsTimer;
const fullscreenBtn = document.getElementById('fullscreen');
const papaDiv = document.getElementById('papa');
fullscreenBtn.onclick = () => {
if (!document.fullscreenElement) {
papaDiv.requestFullscreen().catch(err => console.log);
fullscreenBtn.innerText = '退出全屏'; if(!aud.paused) dancer.style.opacity = '1';
} else {
document.exitFullscreen();
fullscreenBtn.innerText = '全屏欣赏';dancer.style.opacity = '0';
}
};
papaDiv.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreenBtn.style.opacity = '1';
fsTimer = setTimeout(() => { fullscreenBtn.style.opacity = '0'; }, 2500);
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!aud.paused) aud.pause();
vids.forEach(v => v.pause());
} else {
if (aud.paused && !aud.ended) aud.play().catch(()=>{});
vids.forEach(v => v.play().catch(()=>{}));
}
});
['contextmenu', 'dragstart', 'selectstart'].forEach(ev =>
papaDiv.addEventListener(ev, (e) => { if(e.target !== thumb) e.preventDefault(); })
);
updateProgressUI(0);
</script>
</body>
</html>
歌词很奇特，会转的圆中姑娘怎么是倒过来的呢。歌曲好听的。{:4_187:} 视频背景很赞，还有几条黑鱼在游。好创意！{:4_199:} 播放键设置需要修改！ 很有创意的制作，欣赏学习！祝制作愉快{:4_204:}{:4_190:}
https://q1.itc.cn/q_70/images03/20260228/afe38ef2df864af6accc94ace625214f.gif 梦江南 发表于 2026-6-7 14:07
歌词很奇特，会转的圆中姑娘怎么是倒过来的呢。歌曲好听的。
那是视频效果呀，谢谢江南鼓励{:4_187:} 梦江南 发表于 2026-6-7 14:09
视频背景很赞，还有几条黑鱼在游。好创意！
全屏中的动图是亚伦老师分享作品素材，背景动图是亦是金老师分享作品素材，几条黑鱼是了了子老师分享作品素材，在此一并表示感谢{:4_190:} 本帖最后由 杨帆 于 2026-6-8 15:18 编辑
亚伦影音工作室 发表于 2026-6-7 14:37
播放键设置需要修改！
已修改，由衷感谢亚伦老师指导{:4_190:} 也曾年轻 发表于 2026-6-7 15:27
谢谢年轻老师鼓励，请多指导{:4_190:} 本帖最后由 杨帆 于 2026-6-7 16:27 编辑
霜染枫丹 发表于 2026-6-7 14:46
很有创意的制作，欣赏学习！祝制作愉快
本帖尝试以Canvas绘制文本，谢谢枫丹老师鼓励，互相学习，祝开心{:4_204:} 杨帆 发表于 2026-6-7 16:20
谢谢年轻老师鼓励，请多指导
1. 播放/暂停 按钮与一般习惯相反，在style里把两者互换下就行了；
2. canvas似乎没什么作用，去掉也没多大变化，只是个人感觉。 曲好图美，谢谢杨帆。 本帖最后由 杨帆 于 2026-6-8 15:21 编辑
也曾年轻 发表于 2026-6-7 17:02
1. 播放/暂停 按钮与一般习惯相反，在style里把两者互换下就行了；
2. canvas似乎没什么作用，去掉也 ...
是的，改成一般习惯设置了，图标呈现应该与播放状态提示一致
在效果上用canvas没什么不同，只是尝试一种实现方式，由衷感谢年轻老师指导{:4_190:} 梦油 发表于 2026-6-7 17:06
曲好图美，谢谢杨帆。
谢谢梦兄鼓励，鼓捣着玩呢，祝开心天天{:4_190:} 杨帆 发表于 2026-6-7 17:16
谢谢梦兄鼓励，鼓捣着玩呢，祝开心天天
杨帆朋友别客气。 是的，播放按钮和平日的习惯是相反的呢。
全屏时能看到一个小动图，非全屏时看不到。进度条外侧的闪光很神奇，同步歌词也漂亮。
欣赏杨帆好帖{:4_187:} 本帖最后由 杨帆 于 2026-6-8 15:22 编辑
红影 发表于 2026-6-7 21:07
是的，播放按钮和平日的习惯是相反的呢。
全屏时能看到一个小动图，非全屏时看不到。进度条外侧的闪光很神 ...
对，预设是这样的，已改过来了，谢谢影子鼓励，祝开心{:4_204:} 杨帆 发表于 2026-6-7 22:44
对，预设置就是这样的，谢谢影子鼓励，祝开心
这个制作很漂亮，再赏杨帆好帖{:4_187:} 本帖最后由 杨帆 于 2026-6-15 20:19 编辑 <br /><br />红影 发表于 2026-6-8 14:37
这个制作很漂亮，再赏杨帆好帖
欢迎影子，感谢鼓励，祝你愉快{:4_204:}
<style>
#msvg { display: block; margin: 20px auto; }
</style>
<svg id="msvg" width="280" height="280" viewBox="0 0 512 512">
<defs id="defs">
<radialGradient id="grd" cx="55%" cy="45%" r="60%">
<stop offset="0%" stop-color="#00FFFF"></stop>
<stop offset="50%" stop-color="#6495ED"></stop>
<stop offset="100%" stop-color="#7B68EE"></stop>
</radialGradient>
</defs>
</svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var d = 'M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z';
dr.path(d,'url(#grd)').set('fill-rule', 'evenodd');
</script>
页:
[1]