Anger

马黑黑 发表于 2025-9-7 08:55

马黑黑 发表于 2025-9-7 08:56

<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/mg.webp') no-repeat center/cover; --ma-size: 18%; }
#btnFs { right: 20px; top: 20px; color: #ccc; border-color: currentColor!important; }
#prog { position: absolute; right: 10px; bottom: 10px; width: var(--ma-size); cursor: pointer; filter: hue-rotate(80deg) opacity(.6); }
#ma { right: 10px; bottom: 40px; border-radius: 50%; }
.vid { mixed-blend-mode: screen; opacity: 1; }
#msvg line { stroke-dasharray: 4 8; stroke-dashoffset: 100%; animation: move 2s linear infinite alternate var(--state); }
@keyframes move { to { stroke-dashoffset: 0; } }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2105311084" autoplay loop></audio>
<video class="vid pd-vid" src="https://img.tukuppt.com/video_show/7165162/00/19/84/5f16a04c6d293.mp4" autoplay loop muted></video>
<progress id="prog"></progress>
<div id="ma" class="opacity">
<svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
</div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

var dr = Dr.dr(msvg);
dr.circle(0, 0, 80, 'none', '#fff', 20).set('stroke-dasharray', '4 8');
var tt = 3;
Array.from({length: tt}).forEach((_,k) => {
dr.line(3, 0, 70, 0, '#eee', 20).transform(`rotate(${360/tt*k})`).set('stroke-dasharray', '4 2');
});

aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;

FS(pa, ma);
</script>
</div>

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

马黑黑 发表于 2025-9-7 09:01

怒源自于心，是对目标极致追求的态度，绝非无中生有。认准方向，只管前行……

花飞飞 发表于 2025-9-7 10:05

好飒的机车美人儿，视频的渲染令画面极具张力，有强烈的视频冲击感。。。
配合标题和二楼的说明，勾勒出大写两个字，冲啊。。
先为这这画面喝彩~~

花飞飞 发表于 2025-9-7 10:10

进度条加小播的表现形式，
看到第八行和第九行又卡住了，我还是先去看看教程。。{:4_170:}

梦江南 发表于 2025-9-7 10:28

漂亮，欣赏黑黑老师的精彩分享。{:4_199:}

花飞飞 发表于 2025-9-7 10:42

先画个圆，宽度为20，画的是虚线，'4 8'这个可以理解。。。
下面的线条3, 0, 70, 0,这四个数据看得有点傻眼{:4_173:}
重复旋转3次，还有颜色宽度啥的跟之前也差不多。。。

红影发表于 2025-9-7 10:43

咋感觉是虚线转向了，由横的变成竖的了，应该是边框厚度造成的奇妙效果吧，并不是转向了{:4_173:}

花飞飞 发表于 2025-9-7 10:45

最后只有两句是进度条的了，
代码简洁，又能显示小播结构，点三十二个赞。{:4_173:}

红影发表于 2025-9-7 10:47

当中的线形的这句没看懂，set('stroke-dasharray', '4 2'，看css里的设置，线性的stroke-dasharray: 4 8;
js里设置的这句起什么作用呢，看间隔和线宽，圆形和线性从观感上是一样的。

红影发表于 2025-9-7 10:48

这个虚线动态设置的是往复的，漂亮，在当中相接的地方，好像是三角形的塌陷，很奇妙{:4_199:}

马黑黑 发表于 2025-9-7 12:19

红影发表于 2025-9-7 10:48
这个虚线动态设置的是往复的，漂亮，在当中相接的地方，好像是三角形的塌陷，很奇妙

偏移是运动中，它可能会超越衔接的边界

马黑黑 发表于 2025-9-7 12:25

红影发表于 2025-9-7 10:47
当中的线形的这句没看懂，set('stroke-dasharray', '4 2'，看css里的设置，线性的stroke-dasharray: 4 8; ...

CSS+HTML（SVG）代码结构下，CSS的相关属性设置很多会覆盖HTML（或SVG）的同名属性设置。看这个例子：

<style>
.mydiv {
width: 300px;
height: 300px;
border: 1px solid gray;
}
</style>

<div width="600" height="400" class="mydiv">Hello World</div>

红色的CSS代码和蓝色的HTML代码都去设置元素的宽度，这时，CSS的设置会覆盖HTML的属性设置。注意，是属性，这里属性指向 width 和 height。

但下面的 HTML代码中的宽高不会被前面的CSS设置所覆盖：

<div class="mydiv" style="width: 600px; height: 400px;"></div>

原因是这个 div 使用了内联 style 属性，style 属性里一CSS的方式设置了元素的宽高属性，这相当于在第一个CSS属性之后后来重新写了一个CSS属性。

马黑黑 发表于 2025-9-7 12:26

花飞飞发表于 2025-9-7 10:45
最后只有两句是进度条的了，
代码简洁，又能显示小播结构，点三十二个赞。

多了，去掉31个

马黑黑 发表于 2025-9-7 12:26

红影发表于 2025-9-7 10:43
咋感觉是虚线转向了，由横的变成竖的了，应该是边框厚度造成的奇妙效果吧，并不是转向了

虚线就是酱紫的呀

马黑黑 发表于 2025-9-7 12:27

花飞飞发表于 2025-9-7 10:05
好飒的机车美人儿，视频的渲染令画面极具张力，有强烈的视频冲击感。。。
配合标题和二楼的说明，勾勒出大 ...

谢喝

马黑黑 发表于 2025-9-7 12:27

花飞飞发表于 2025-9-7 10:42
先画个圆，宽度为20，画的是虚线，'4 8'这个可以理解。。。
下面的线条3, 0, 70, 0,这四个数据看得有点傻 ...

{:4_190:}

杨帆发表于 2025-9-7 13:31

漂亮！富有代入感，谢谢老师精彩分享{:4_191:}

朵拉发表于 2025-9-7 15:45

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

马黑黑 发表于 2025-9-7 15:46

朵拉发表于 2025-9-7 15:45
漂亮效果，学生已交作业，请老师指正

{:4_199:}

页: [1] 2 3 4 5 6 7 8 9

花潮论坛's Archiver

Anger