七夕节，送您最美的玫瑰！
本帖最后由 夕阳黄昏 于 2025-8-29 12:58 编辑 <br /><br /><meta name="referrer" content="never" /><meta charset="utf-8" >
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
#showSVG {width:500px; position:relative; margin:100px auto; overflow:hidden;border-radius:12px;box-shadow:2px 2px 5px black;
background:url(https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlRqpLrU14YRAxYqiciaUs0G2txhiaWUBvssZ5ILry0KXdDDz3FpjB6NDFQ/640) center/ cover;}
#processMeter {position:absolute; right:10px;bottom:-40px;width:120px;height:120px;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2em 仿宋;
pointer-events:none;width:1.5em;height:80%;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
writing-mode: vertical-rl;z-index:99;left:5px;top:40px;color:hsla(240,60%, 90%, 0.7);
}
.lrcShow::before {
writing-mode: vertical-rl;
}
@keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
@keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
</style>
<div id="showSVG">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 576 1024" id="sObj">
<defs>
<mask id="mask0" x="0" y="0" width="576" height="1024">
<circle cx="288" cy="512" r="10" style="stroke:#006600; fill:#ffffff;">
<animate attributeName="r" from="10" to="1024" dur="2" fill="freeze" begin="">
</animate>
</circle>
</mask>
<mask id="mask1" x="0" y="0" width="576" height="1024">
<ellipse cx="288" cy="512" rx="7.2" ry="12.8" style="stroke:#006600; fill:#ffffff;">
<animate attributeName="rx" from="7.2" to="432" dur="2" fill="freeze" begin="bpic4.begin;bpic5.begin;bpic10.begin;">
</animate>
<animate attributeName="ry" from="12.8" to="768" dur="2" fill="freeze" begin="bpic4.begin;bpic5.begin;bpic10.begin;">
</animate>
</ellipse>
</mask>
<mask id="mask2" x="0" y="0" width="576" height="1024">
<rect x="280.8" y="499.2" width="7.2" height="12.8" style="stroke:#006600; fill:#ffffff;">
<animate attributeName="width" from="7.2" to="576" dur="2" fill="freeze" begin="bpic6.begin;bpic12.begin;bpic17.begin;">
</animate>
<animate attributeName="height" from="12.8" to="1024" dur="2" fill="freeze" begin="bpic6.begin;bpic12.begin;bpic17.begin;">
</animate>
<animate attributeName="x" from="280.8" to="0" dur="2" fill="freeze" begin="bpic6.begin;bpic12.begin;bpic17.begin;">
</animate>
<animate attributeName="y" from="499.2" to="0" dur="2" fill="freeze" begin="bpic6.begin;bpic12.begin;bpic17.begin;">
</animate>
</rect>
</mask>
<mask id="mask3" x="0" y="0" width="576" height="1024">
<rect x="276" y="500" width="12" height="12" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);stroke:#006600; fill:#ffffff;">
<animate attributeName="width" from="12" to="2048" dur="2" fill="freeze" begin="bpic15.begin;">
</animate>
<animate attributeName="height" from="12" to="2048" dur="2" fill="freeze" begin="bpic15.begin;">
</animate>
<animate attributeName="x" from="276" to="-736" dur="2" fill="freeze" begin="bpic15.begin;">
</animate>
<animate attributeName="y" from="500" to="-512" dur="2" fill="freeze" begin="bpic15.begin;">
</animate>
</rect>
</mask>
<mask id="mask4" x="0" y="0" width="576" height="1024">
<rect x="276" y="500" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);stroke:#006600; fill:#ffffff;">
<animate attributeName="width" from="12" to="2048" dur="2" fill="freeze" begin="bpic9.begin;bpic22.begin;">
</animate>
<animate attributeName="height" from="12" to="2048" dur="2" fill="freeze" begin="bpic9.begin;bpic22.begin;">
</animate>
<animate attributeName="x" from="276" to="-736" dur="2" fill="freeze" begin="bpic9.begin;bpic22.begin;">
</animate>
<animate attributeName="y" from="500" to="-512" dur="2" fill="freeze" begin="bpic9.begin;bpic22.begin;">
</animate>
</rect>
</mask>
<mask id="mask5" x="0" y="0" width="576" height="1024">
<rect x="276" y="500" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);stroke:#006600; fill:#ffffff;">
<animate attributeName="width" from="12" to="2048" dur="2" fill="freeze" begin="bpic14.begin;bpic20.begin;">
</animate>
<animate attributeName="height" from="12" to="2048" dur="2" fill="freeze" begin="bpic14.begin;bpic20.begin;">
</animate>
<animate attributeName="x" from="276" to="-736" dur="2" fill="freeze" begin="bpic14.begin;bpic20.begin;">
</animate>
<animate attributeName="y" from="500" to="-512" dur="2" fill="freeze" begin="bpic14.begin;bpic20.begin;">
</animate>
</rect>
</mask>
<mask id="mask6" x="0" y="0" width="576" height="1024">
<rect x="276" y="500" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);stroke:#006600; fill:#ffffff;">
<animate attributeName="width" from="12" to="2048" dur="2" fill="freeze" begin="bpic8.begin;bpic19.begin;">
</animate>
<animate attributeName="height" from="12" to="2048" dur="2" fill="freeze" begin="bpic8.begin;bpic19.begin;">
</animate>
<animate attributeName="x" from="276" to="-736" dur="2" fill="freeze" begin="bpic8.begin;bpic19.begin;">
</animate>
<animate attributeName="y" from="500" to="-512" dur="2" fill="freeze" begin="bpic8.begin;bpic19.begin;">
</animate>
</rect>
</mask>
<pattern id="pm7" width="200" height="200" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="100" height="100" fill="white">
</rect>
<rect x="100" y="0" width="100" height="100" fill="black">
<animate attributeName="fill" from="black" to="white" begin="bpic1.begin;bpic3.begin;" dur="3" fill="freeze">
</animate>
</rect>
<rect x="0" y="100" width="100" height="100" fill="black">
<animate attributeName="fill" from="black" to="white" begin="bpic1.begin;bpic3.begin;" dur="3" fill="freeze">
</animate>
</rect>
<rect x="100" y="100" width="100" height="100" fill="white">
</rect>
</pattern>
<mask id="mask7" x="0" y="0" width="576" height="1024">
<rect x="0" y="0" width="576" height="1024" style="fill:url(#pm7)">
</rect>
</mask>
<pattern id="pm8" width="50" height="50" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="0" height="50" fill="white">
<animate attributeName="width" from="0" to="50" begin="bpic7.begin;" dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask8" x="0" y="0" width="576" height="1024">
<rect x="0" y="0" width="576" height="1024" style="fill:url(#pm8)">
</rect>
</mask>
<pattern id="pm9" width="50" height="50" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="50" height="0" fill="white">
<animate attributeName="height" from="0" to="50" begin="bpic18.begin;bpic21.begin;" dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask9" x="0" y="0" width="576" height="1024">
<rect x="0" y="0" width="576" height="1024" style="fill:url(#pm9)">
</rect>
</mask>
<pattern id="pm10" width="200" height="100" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100" fill="white" style="clip-path: polygon(0 0, 0 100%, 100% 0);">
</rect>
<rect x="0" y="0" width="200" height="100" fill="black" style="clip-path: polygon(100% 0, 0 100%, 100% 100%);">
<animate attributeName="fill" from="black" to="white" begin="bpic2.begin;bpic11.begin;bpic13.begin;" dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask10" x="0" y="0" width="576" height="1024">
<rect x="0" y="0" width="576" height="1024" style="fill:url(#pm10)">
</rect>
</mask>
<pattern id="pm11" width="200" height="100" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100" fill="white" style="clip-path: polygon(0 0, 0% 100%, 100% 100%);">
</rect>
<rect x="0" y="0" width="200" height="100" fill="black" style="clip-path: polygon(100% 0, 0 0, 100% 100%);">
<animate attributeName="fill" from="black" to="white" begin="bpic0.begin;bpic16.begin;" dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask11" x="0" y="0" width="576" height="1024">
<rect x="0" y="0" width="576" height="1024" style="fill:url(#pm11)">
</rect>
</mask>
</defs>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlRqpLrU14YRAxYqiciaUs0G2txhiaWUBvssZ5ILry0KXdDDz3FpjB6NDFQ/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask11)">
<animate id="bpic0" attributeName="opacity" from="0" to="1" begin="0;epic22.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic0" attributeName="opacity" from="1" to="0" begin="bpic0.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlqGNyRXg2m8KJRMJ4dmYII6ScwqlYghLwtN3Iy4hibgo1VEpVzaO5YZQ/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask7)">
<animate id="bpic1" attributeName="opacity" from="0" to="1" begin="epic0.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic1" attributeName="opacity" from="1" to="0" begin="bpic1.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtl0U2TSdQAdJvYticcpkplJ2Hgr7GSu0sVpqAtqPVxo3ygB1SVY4jABhA/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask10)">
<animate id="bpic2" attributeName="opacity" from="0" to="1" begin="epic1.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic2" attributeName="opacity" from="1" to="0" begin="bpic2.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlI3j30fkDoVSH0t5tVib4ZBUkvHgW3m80DpPCWV3XuU7WXSXXgshDkMA/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask7)">
<animate id="bpic3" attributeName="opacity" from="0" to="1" begin="epic2.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic3" attributeName="opacity" from="1" to="0" begin="bpic3.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtl8MwmCica0HukCsKD2ZZ6iaNqYTgib4JaFGA5AibMdykrjChTEh3W2WDDlg/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask1)">
<animate id="bpic4" attributeName="opacity" from="0" to="1" begin="epic3.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic4" attributeName="opacity" from="1" to="0" begin="bpic4.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtljGC9MpMIsarjvcK958ClgvGAUEvZBvOxpb1rDw6XcX15uicKVR0T2Uw/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask1)">
<animate id="bpic5" attributeName="opacity" from="0" to="1" begin="epic4.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic5" attributeName="opacity" from="1" to="0" begin="bpic5.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlrSYaa86oVSwPt6mqV6OFbWwpocyo2L7G9BwicXmaqdFeKpicia0PrtLhw/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask2)">
<animate id="bpic6" attributeName="opacity" from="0" to="1" begin="epic5.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic6" attributeName="opacity" from="1" to="0" begin="bpic6.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlrAqQgYl4Cl8siaeyqfP1MvCtnnKawicjwx3LqpRNsgCZ6cbr2RbFREFA/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask8)">
<animate id="bpic7" attributeName="opacity" from="0" to="1" begin="epic6.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic7" attributeName="opacity" from="1" to="0" begin="bpic7.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtl2cE2XuIeQLFbLico3PpooBfaUGwZicIPkGat0SwMLc3lLoD4JD2O1bdA/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask6)">
<animate id="bpic8" attributeName="opacity" from="0" to="1" begin="epic7.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic8" attributeName="opacity" from="1" to="0" begin="bpic8.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtleSVO77KPQBHWPMMANlH0EPETibfSwGVay2McmAlQswUWGGwicRruokbg/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask4)">
<animate id="bpic9" attributeName="opacity" from="0" to="1" begin="epic8.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic9" attributeName="opacity" from="1" to="0" begin="bpic9.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtllesSUiaEwBUo3xQichDwISO72ffUszoJU1BG6n0bYG17Sbz9Ch0uLG8g/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask1)">
<animate id="bpic10" attributeName="opacity" from="0" to="1" begin="epic9.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic10" attributeName="opacity" from="1" to="0" begin="bpic10.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtl80TiciatY3Xiaf9Z3y6TMc70n6OcALvVzRNibBTwhygq0IIIib4yvbyTjEA/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask10)">
<animate id="bpic11" attributeName="opacity" from="0" to="1" begin="epic10.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic11" attributeName="opacity" from="1" to="0" begin="bpic11.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlpCXC32QMA50bmdN1B73f4oXvvBhBrbvUFV79wrKLJYf11XYdBlAHXg/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask2)">
<animate id="bpic12" attributeName="opacity" from="0" to="1" begin="epic11.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic12" attributeName="opacity" from="1" to="0" begin="bpic12.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlsRQO9FIoe6CK2knnq8spHXtTiah2ZZZQ62Csk0fR4ibe7w525ohiaphKQ/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask10)">
<animate id="bpic13" attributeName="opacity" from="0" to="1" begin="epic12.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic13" attributeName="opacity" from="1" to="0" begin="bpic13.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlTBuvdUANVH1qG2jk9ibG877AONwgysd0YXwNsKngjfDlClNa7HJNPLQ/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask5)">
<animate id="bpic14" attributeName="opacity" from="0" to="1" begin="epic13.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic14" attributeName="opacity" from="1" to="0" begin="bpic14.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtl6t4yUsZhf3KomUmPUdCdDmSvWSpzzcS3iavXYicpghm6SSQpyqGqmksA/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask3)">
<animate id="bpic15" attributeName="opacity" from="0" to="1" begin="epic14.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic15" attributeName="opacity" from="1" to="0" begin="bpic15.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlQzy62ly0oxV5VBFWfAtOkUPN5MpPAbWwu8C1FzafiaiacZ3XicS7oVzBg/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask11)">
<animate id="bpic16" attributeName="opacity" from="0" to="1" begin="epic15.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic16" attributeName="opacity" from="1" to="0" begin="bpic16.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtllscryibI3jGNVHuj8bX1dAMQ578otLXS2DwvfricTO2xb5cXryuGbGWA/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask2)">
<animate id="bpic17" attributeName="opacity" from="0" to="1" begin="epic16.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic17" attributeName="opacity" from="1" to="0" begin="bpic17.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlym2V1MKUyfzPUn58iaT0LZemzHzbMibiabbyfYla04ONU8KrYSic97cjFg/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask9)">
<animate id="bpic18" attributeName="opacity" from="0" to="1" begin="epic17.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic18" attributeName="opacity" from="1" to="0" begin="bpic18.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlWqyU9eVrok6VoRvG6tjrqFzIGbuT8kibOmBicI2PugX90ibFff2dUcibjQ/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask6)">
<animate id="bpic19" attributeName="opacity" from="0" to="1" begin="epic18.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic19" attributeName="opacity" from="1" to="0" begin="bpic19.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlKWpz5zjBSY728aibBtiahdLD7wDmdS8lvqYk1S0o2YoUW6oia5BeFLUmA/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask5)">
<animate id="bpic20" attributeName="opacity" from="0" to="1" begin="epic19.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic20" attributeName="opacity" from="1" to="0" begin="bpic20.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlId8icP7rut59ibdSxLOHCibFTObDRssQbHjKM3XKICegffVaNRv69y8hg/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask9)">
<animate id="bpic21" attributeName="opacity" from="0" to="1" begin="epic20.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic21" attributeName="opacity" from="1" to="0" begin="bpic21.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/5xzGjDwjeSdqhEtJ8Npcroe2TTLZDPtlQ5u8AkZUDzHiatCJFIiczxcvmY5Q0NVIqI0iajMCgXM7to1q2UMSJL3Uw/640" opacity="0" x="0" y="0" width="576" height="1024" preserveAspectRatio="none" mask="url(#mask4)">
<animate id="bpic22" attributeName="opacity" from="0" to="1" begin="epic21.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic22" attributeName="opacity" from="1" to="0" begin="bpic22.begin+8" dur="2" fill="freeze">
</animate>
</image>
</svg>
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<radialGradient r="0.8" id="rg">
<stop offset="0.1" stop-color="hsl(0, 70%, 50%)"></stop>
<stop offset="0.5" stop-color="hsl(10, 70%, 75%)"></stop>
<stop offset="1" stop-color="hsl(30, 70%, 90%)"></stop>
</radialGradient>
<path d="M 100 50 A 20 13.333333333333334 0 0 0 140 50 A 20 13.333333333333334 0 0 0 100 50 A 20 13.333333333333334 72 0 0 112.36067977499789 88.04226065180615 A 20 13.333333333333334 72 0 0 100 50 A 20 13.333333333333334 144 0 0 67.63932022500211 73.51141009169893 A 20 13.333333333333334 144 0 0 100 50 A 20 13.333333333333334 216 0 0 67.63932022500211 26.48858990830108 A 20 13.333333333333334 216 0 0 100 50 A 20 13.333333333333334 288 0 0 112.36067977499789 11.957739348193854 A 20 13.333333333333334 288 0 0 100 50 " fill-rule="evenodd" fill="url(#rg)" id="mCtrl" style="--rState: running;"></path>
<g stroke-width="8">
<path id="bgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="pink" fill="none" style="stroke-dasharray: 454.028;"></path>
<path id="fgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="snow" fill="none" style="stroke-dasharray: 454.028; stroke-dashoffset: 405.124;"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="red" style="font:bold 24px;">
<text x="82%" y="50%" id="durTime">04:22</text>
<text x="18%" y="50%" id="curTime">00:28</text>
</g>
</svg>
</div> <div class="lrcShow" data-lrc="七夕玫瑰" >七夕玫瑰</div>
</div>
<script>
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
sf0.onload = () => {
let lrctxt = `
七夕
牛郎织女会鹊桥
明月也把人间照
结串彩绳来斗巧
祈愿红绸挂树梢
兰夜湖中荷花摇
放盏莲灯水中飘
要问哪处风景好
是你隔花对我笑
寻你于灯火阑珊
见你如心湖惊澜
念你于梦中流转
爱你盼此路漫漫
怦然心动的一面
久别重逢的相见
相思此刻满人间
恰好七夕共婵娟
小心思千般
为你悸动的一眼
思有念情有缘
浪漫无限
花落在肩轻轻一颤
风过心动时
如拨琴弦
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=2075547035.mp3",
}
let player = new lrcPlayerY(opts);
// 格式化时间数据
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};
// 计算/设置控制路径有关的数据
let circlePoints = [];
let bgcLen = bgc.getTotalLength();
fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
// 在 timeupdate 事件处理中添加与控制路径有关的处理
player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(player.mObj.duration);
curTime.textContent = formatTime(player.mObj.currentTime);
});
// 动态元素监测
let runState = () => {
player.mObj.paused
? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations())
: (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
}
// SVG viewBox 与 实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
//console.log(factorX, factorY);
// 歌曲进度条鼠标移动处理
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = player.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
let fIdx = false;
player.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; player.idx = idx;
player.mObj.currentTime = chkTime;
return fIdx;
}
});
};
fgc.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
fgc.onclick = bgc.onclick = (event) => seeking = !seeking;
// 歌曲、歌词 及 动态元素 启/停控制
mCtrl.onclick = () => {
player.mObj.paused ? (player.mObj.play()) : (player.mObj.pause());
}
player.mObj.addEventListener('play', () => runState());
player.mObj.addEventListener('pause', () => runState());
player.mObj.play().catch(_ = () => runState());
}
</script>
七夕节，送您最美的玫瑰！特效唯美 感谢夕阳黄昏带来的精彩，辛苦了。祝你七夕快乐。 好美的月季花，这歌还是第一次听到。老师用AI做的？ 祝七夕节同乐！{:4_187:} 梦江南 发表于 2025-8-29 11:54
好美的月季花，这歌还是第一次听到。老师用AI做的？
我可没那本事，所有素材都是网上找的{:5_106:} 偶然~ 发表于 2025-8-29 11:04
感谢夕阳黄昏带来的精彩，辛苦了。祝你七夕快乐。
谢谢支持鼓励 夕阳黄昏 发表于 2025-8-29 12:13
我可没那本事，所有素材都是网上找的
有一样本事也够了。 梦江南 发表于 2025-8-29 11:54
祝七夕节同乐！
https://p0.meituan.net/biztone/3ead5684b5b0bed588ebcec3ecfd2f963024334.jpg 偶然~ 发表于 2025-8-29 11:04
感谢夕阳黄昏带来的精彩，辛苦了。祝你七夕快乐。
https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%2754mb6YOO57uH5aWz6IOM5ZCO55qE55yf5a6e5pWF5LqLXzE3Mjc3NzU0ODUuMDkzMDA1NA%3D%3D%27/0.png 这轮播图还都是漂亮的玫瑰呢，和标题和相符，好美呢。
歌曲好听，歌词同步也很美。欣赏夕阳黄昏老师精美制作{:4_199:} 借夕阳黄昏老师的美帖，同祝大家七夕节快乐{:4_177:} 红影 发表于 2025-8-29 13:06
这轮播图还都是漂亮的玫瑰呢，和标题和相符，好美呢。
歌曲好听，歌词同步也很美。欣赏夕阳黄昏老师精美制 ...
谢谢支持鼓励！ 红影 发表于 2025-8-29 13:06
借夕阳黄昏老师的美帖，同祝大家七夕节快乐
https://copyright.bdstatic.com/vcg/creative/d1e1ff0013d469c3cccfb90b5a7a4ad5.eps@wm_1,k_cGljX2JqaHdhdGVyLmpwZw== 欣赏老师精美七夕代码隹作！ 祝夕阳黄昏和朋友们七夕快乐 深秋红枫 发表于 2025-8-29 16:33
欣赏老师精美七夕代码隹作！
谢谢支持鼓励！
https://imgbdb3.bendibao.com/cqbdb/xiuxian/20258/15/2025815175010_88822.jpg 梦油 发表于 2025-8-29 16:54
祝夕阳黄昏和朋友们七夕快乐
谢谢支持鼓励！
https://img1.baidu.com/it/u=3354141854,2685963722&fm=253&fmt=auto&app=138&f=JPEG 夕阳黄昏 发表于 2025-8-29 18:18
谢谢支持鼓励！
夕阳黄昏朋友别客气。 夕阳黄昏 发表于 2025-8-29 16:28
谢谢支持鼓励！
问好夕阳黄昏老师，好久不见{:4_204:}
页:
[1]
2