【月满花潮庆华诞】放 空（学习马黑黑Tie In效果）
<style>@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: tan url('https://pic1.imgdb.cn/item/68e28ea5c5157e1a8859457c.webp') no-repeat center/cover; }
#progress { position: absolute; width: 15vw; height: 15vw; 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: url(#grd); stroke-opacity: .8; stroke-width: 8; stroke-linecap: round; }
#prog { stroke: orange; stroke-opacity: 1; }
#btnFs { 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/b17ade03f5074ae9a04b876248c1d859.mp3" autoplay="" loop=""></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/65/5e5a1190b8434.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}, [['#caa73a',0],['#0b416f',0.5],['#caa73a',1]]);
dr.path('M-150 0 A150 150 0 0 0 150 0').id('track').addTo(g2); //M-160 50 Q0 240,160 50
dr.path('M-150 0 A150 150 0 0 0 150 0').id('prog').addTo(g2);
dr.polygon('0 0,-25 -120,0 -90,25 -120,0 0').addTo(g1).rotates(10);
dr.circle(0, 0, 120).addTo('g1');
dr.text('~放 空~', 0, -140, 'url(#grd)').style('stroke: gray; stroke-width: 2; font: bold 50px sans-serif; letter-spacing: 4px; text-anchor: middle;');
FS(pa, g1);
</script> @马黑黑
老师 晚上好，学生交作业，请指正{:4_190:} 漂亮，欣赏朵宝好帖{:4_199:} 唯美的作品，也有一点点自己的调配了，但还不够
页:
[1]