朵拉 发表于 2025-10-4 22:16

【月满花潮庆华诞】渡 红 尘（学习马黑黑红山效果）

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz02.css';
    #pa { --offsetX: 81px; --bg: tan url('https://cccimg.com/view.php/50ff736b136711ad3568682b11bfd55d.jpg') no-repeat center/cover; }
    #progress { position: absolute; bottom: -20px; width: 20vw; height: 20vw; transition: .4s; }
    #g1 { cursor: pointer; fill: transparent; stroke: url('#grd'); stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
    #g2 { cursor: pointer; fill: none; stroke: #eee; stroke-opacity: .5; stroke-width: 8; stroke-linecap: round; }
    #prog { stroke: url(#grd); stroke-opacity: 1; }
    #btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor !important; }
    @keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="pa">
    <audio id="aud" src="https://cccimg.com/view.php/9cc85b9366645a601404df546b0dd752.mp3" autoplay="" loop=""></audio>
    <video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4" autoplay loop muted></video>
    <svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
      <g id="g1"><title>ALT+X</title></g>
      <g id="g2"><title>调节进度</title></g>
    </svg>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
    import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.1';

    var dr = Dr.dr(progress);

    dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['#7aaec5',0],['#cf6865',0.5],['darkred',1]]);
    dr.path('M-130 -50 C-240 220,240 220,130 -50').id('track').addTo(g2);
    dr.path('M-130 -50 C-240 220,240 220,130 -50').id('prog').addTo(g2);
    dr.ellipse(0, 0, 100, 20).addTo(g1).rotates(3);
    dr.path('M-160 0 Q0 -260,160 0').set('id','txtpath').addTo('defs');
    dr.text('渡红尘 · 张碧晨', 0, 0, 'url(#grd)')
      .sets({stroke: 'darkred', 'storke-width': 2})
      .style('font: bold 2.6em sans-serif; letter-spacing: 4px; text-anchor: middle;')
      .textPath('txtpath','50%');

    FS(pa, g1);
</script>

朵拉 发表于 2025-10-4 22:19

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

马黑黑 发表于 2025-10-4 22:52

漂亮，养眼

红影 发表于 2025-10-4 22:54

漂亮。欣赏朵宝好帖。双节快乐{:4_187:}

樵歌 发表于 2025-10-5 07:37

漂亮的代码音画帖！朵儿辛苦了，中秋快乐！{:4_204:}
页: [1]
查看完整版本: 【月满花潮庆华诞】渡 红 尘（学习马黑黑红山效果）