朵拉 发表于 2025-9-23 08:54

大展鸿图（学习马黑黑黑暗时分效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: #ccc url('https://cccimg.com/view.php/6889e1f0c0296d5d6516bb3247743115.jpg') no-repeat center/cover; }
        #progress { position: absolute; width: 10vw; height: 10vw;right: 220px; bottom: 60px;transition: .4s; }
        #prog, #track { fill: none; stroke: url(#lGrd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #prog { stroke: lightblue; stroke-opacity: .4; }
        #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
        #btnFs { bottom: 20px; color: tan; border-color: currentColor!important; }
        .title-text { right: 20px; top: 30px; font-size: 30px; writing-mode: vertical-rl; }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/25d5e61e3000c9ef6b70b849eeeb48a6.mp3" autoplay="" loop=""></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/74/5b4971fc323af.mp4" autoplay loop muted></video>
        <div class="title-text">大展鸿图</div>
        <svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <defs>
                        <linearGradient id="lGrd" gradientTransform="rotate(30)">
                                <stop offset="5%" stop-color="gold" />
                                <stop offset="95%" stop-color="red" />
                        </linearGradient>
                </defs>
                <g id="g1" class="brightness"><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.0';

        var dr = Dr.dr(progress);
        dr.ellipse(0, 0, 140, 70,'transparent','url(#lGrd)',10).addTo(g1).rotates(5,180);
        dr.circle(0,0,180).id('track').addTo(g2);
        dr.circle(0,0,180).id('prog').addTo(g2);

        FS(pa, g1);
</script>

朵拉 发表于 2025-9-23 08:55

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

梦江南 发表于 2025-9-23 11:36

佳作欣赏，问好朵拉！{:4_199:}

马黑黑 发表于 2025-9-23 12:18

{:4_199:}

红影 发表于 2025-9-23 15:02

漂亮，欣赏朵宝好帖{:4_199:}

小辣椒 发表于 2025-9-23 22:16

朵拉做作业的速度真快哦{:4_177:}

小辣椒 发表于 2025-9-23 22:16

欣赏朵拉漂亮的制作{:4_205:}
页: [1]
查看完整版本: 大展鸿图（学习马黑黑黑暗时分效果）