朵拉 发表于 2025-9-21 15:32

小城夏天（学习马黑黑回家效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: #ccc url('https://pic1.imgdb.cn/item/68cfa3e1c5157e1a8821708d.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 12vw; height: 12vw;right: 230px; bottom: 200px; transition: .4s; }
        #prog, #track { fill: none; stroke: url(#grd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #prog { stroke: rgb(255,255,255); }
        #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
        #btnFs { right: 20px; top: 20px; color: cyan; border-color: currentColor!important; }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/9fafc483351903ae625a9b6993601fb5.mp3" autoplay="" loop=""></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
        <svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <defs>
                        <radialGradient id="grd" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.75">
                                <stop offset="0%" stop-color="transparent"></stop>
                                <stop offset="70%" stop-color="red"></stop>
                                <stop offset="100" stop-color="lightgreen"></stop>
                        </radialGradient>
                </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.path('M0 0 C200 -200,-200 -200,0 0Z').addTo('g1').rotates(5);
        dr.path('M-180 0 A180 180 0 1 0 180 0').id('track').addTo('g2');
        dr.path('M-180 0 A180 180 0 1 0 180 0').id('prog').addTo('g2');

        FS(pa, g1);
</script>

朵拉 发表于 2025-9-21 15:33

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

梦江南 发表于 2025-9-21 17:46

好制作，欣赏问好！{:4_199:}

澜天 发表于 2025-9-21 19:37

朵拉 发表于 2025-9-21 15:33
@马黑黑
老师好，学生交作业，请指正

欣赏好制作
{:4_204:}

樵歌 发表于 2025-9-21 19:49

优等生{:4_204:}

红影 发表于 2025-9-21 21:25

漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 小城夏天（学习马黑黑回家效果）