朵拉 发表于 2025-9-26 09:30

簧 竹 音（学习马黑黑正道沧桑效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: tan url('https://pic1.imgdb.cn/item/68d5e9bac5157e1a8832e275.jpg') no-repeat center/cover; }
        #progress { position: absolute; left: 20px; bottom: 20px; width: 15vw; height: 15vw; transition: .4s; }
        #g1 { cursor: pointer; fill: url(#grd); fill-opacity: .8; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
        #g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 10; stroke-linecap: round; }
        #prog { stroke: rgba(250,250,250,.6); }
        #btnFs { left: 20px; top: 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/d1520b7fd10b6782fbe92006f1d1009d.mp3" autoplay="" loop=""></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/60/76/6396ee8f4bdad.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <g id="g1" class="sepia"><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.gradient('linearGradient', {id: 'grd'}, [['red',0],['orange',.5],['crimson',1]]);
        var points = '0 -20,-60 -170,-20 -120,-10 -180,0 -130,10 -180,20 -120,60 -180,0 -20';
        dr.polygon(points).addTo(g1).rotates(6, 360, 0, -20);
        dr.circle(0, -20, 160, 'transparent').addTo(g1);
        dr.path('M-160 110 Q0 240,160 110').id('track').addTo(g2);
        dr.path('M-160 110 Q0 240,160 110').id('prog').addTo(g2);
        FS(pa, g1);
</script>

朵拉 发表于 2025-9-26 09:30

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

梦江南 发表于 2025-9-26 09:33

漂亮，欣赏问好！{:4_199:}

马黑黑 发表于 2025-9-26 11:52

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

{:4_199:}

红影 发表于 2025-9-26 14:29

漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 簧 竹 音（学习马黑黑正道沧桑效果）