Tie In

马黑黑 发表于 2025-10-4 19:49

马黑黑 发表于 2025-10-4 19:49

<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/55.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://music.163.com/song/media/outer/url?id=1933576" 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}, [['yellow',0],['orange',0.5],['yellow',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('~TIE IN~', 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>
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

小辣椒 发表于 2025-10-4 20:52

好像在博物馆里面想探索什么？音乐配的好{:4_199:}

红影发表于 2025-10-4 21:12

小播和进度条都是代码绘制的，真好看。这样的色彩配置在这样的背景下很漂亮{:4_199:}

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

小辣椒发表于 2025-10-4 20:52
好像在博物馆里面想探索什么？音乐配的好

这支曲子非常特别，我收藏了好久，都不太舍得拿出来分享{:4_170:}

马黑黑 发表于 2025-10-4 23:01

红影发表于 2025-10-4 21:12
小播和进度条都是代码绘制的，真好看。这样的色彩配置在这样的背景下很漂亮

原来设计的小播配色是灰加白，也挺好看，就是觉得过节嘛可以更鲜艳一点靓丽一点，就改成了现在的金黄色系。

杨帆发表于 2025-10-5 14:44

谢谢精彩分享，祝马老师双节快乐{:4_176:}

马黑黑 发表于 2025-10-5 19:44

杨帆发表于 2025-10-5 14:44
谢谢精彩分享，祝马老师双节快乐

同样祝你

杨帆发表于 2025-10-5 23:33

马黑黑发表于 2025-10-5 19:44
同样祝你

谢谢老师，感恩老师，祝福老师{:4_176:}

朵拉发表于 2025-10-5 23:45

精彩的效果，动感的音乐~~{:4_204:}

朵拉发表于 2025-10-5 23:46

学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-10-6 08:50

朵拉发表于 2025-10-5 23:46
学生已交作业，请老师指正

中秋好

马黑黑 发表于 2025-10-6 08:50

朵拉发表于 2025-10-5 23:45
精彩的效果，动感的音乐~~

音乐很特别

马黑黑 发表于 2025-10-6 08:51

杨帆发表于 2025-10-5 23:33
谢谢老师，感恩老师，祝福老师

恩师用词不妥。彼此学习，无师生之说。

杨帆发表于 2025-10-6 10:19

马黑黑发表于 2025-10-6 08:51
恩师用词不妥。彼此学习，无师生之说。

谢谢分享，祝老师双节快乐{:4_191:}

马黑黑 发表于 2025-10-6 10:46

杨帆发表于 2025-10-6 10:19
谢谢分享，祝老师双节快乐

老师也说不上。这里不是课堂，彼此交流而已。

杨帆发表于 2025-10-6 12:13

马黑黑发表于 2025-10-6 10:46
老师也说不上。这里不是课堂，彼此交流而已。

有名师指路很重要，通过网络课堂学习交流也一样，谢谢老师{:4_191:}

马黑黑 发表于 2025-10-6 12:40

杨帆发表于 2025-10-6 12:13
有名师指路很重要，通过网络课堂学习交流也一样，谢谢老师

{:4_190:}

页: [1]

花潮论坛's Archiver

Tie In