Anger

马黑黑

马黑黑

<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>

马黑黑

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

花飞飞

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

花飞飞

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

梦江南

漂亮，欣赏黑黑老师的精彩分享。

花飞飞

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

红影

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

花飞飞

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

红影

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

红影

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

马黑黑

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

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

马黑黑

红影 发表于 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 10:45
最后只有两句是进度条的了，
代码简洁，又能显示小播结构，点三十二个赞。

多了，去掉31个

马黑黑

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

虚线就是酱紫的呀

马黑黑

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

谢喝

马黑黑

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

杨帆

漂亮！富有代入感，谢谢老师精彩分享

朵拉

漂亮效果，学生已交作业，请老师指正

马黑黑

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