Fearless
本帖最后由 马黑黑 于 2025-9-20 22:53 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/6/fearless.jpg') no-repeat center/cover; }
#ma { bottom: 60px; width: 8vw; height: 8vw; z-index: 10; }
#progress { position: absolute; bottom: 10px; width: 12vw; height: 12vw; transform: translateX(50px); transition: .4s; }
#prog, #track { fill: none; stroke: silver; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: .8; }
#btnFs { right: 20px; top: 20px; color: #333; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28263314" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop muted></video>
<img id="ma" src="https://638183.freep.cn/638183/small/dcjm.webp" title="ALT+X" alt="" />
<svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1"><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.path('M0 -190 Q360 -200,0 190').id('track').addTo('g1');
dr.path('M0 -190 Q360 -200,0 190').id('prog').addTo('g1');
FS(pa, ma);
</script> 本帖最后由 马黑黑 于 2025-9-20 22:53 编辑
帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/6/fearless.jpg') no-repeat center/cover; }
#ma { bottom: 60px; width: 8vw; height: 8vw; z-index: 10; }
#progress { position: absolute; bottom: 10px; width: 12vw; height: 12vw; transform: translateX(50px); transition: .4s; }
#prog, #track { fill: none; stroke: silver; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: .8; }
#btnFs { right: 20px; top: 20px; color: #333; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28263314" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop muted></video>
<img id="ma" src="https://638183.freep.cn/638183/small/dcjm.webp" title="ALT+X" alt="" />
<svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1"><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.path('M0 -190 Q360 -200,0 190').id('track').addTo('g1');
dr.path('M0 -190 Q360 -200,0 190').id('prog').addTo('g1');
FS(pa, ma);
</script>
本帖最后由 花飞飞 于 2025-9-20 22:33 编辑
小播点不动了。。看代码没问题，啥情况呢。。{:4_173:}
试了下，#ma位置设置用百分比就出来了，不知道哪里有点冲突了。。
14行中间没有空格
这个作品画面刺激冒险，有踏过刀山火海，排除万难的冲劲。。。
配上光芒四射的视频，活力实足。
音乐好听。。。大赞。{:4_173:} 简约大气，效果惊艳，谢谢马老师精彩分享{:4_191:} 花飞飞 发表于 2025-9-20 22:26
小播点不动了。。看代码没问题，啥情况呢。。
试了下，#ma位置设置用百分比就出来了，不知道哪里 ...
层级问题。图片代码放在svg代码之后，或者，给 #ma 设置 z-index 属性：#ma { ... z-index: 10; } 杨帆 发表于 2025-9-20 22:50
简约大气，效果惊艳，谢谢马老师精彩分享
{:4_190:} 花飞飞 发表于 2025-9-20 22:36
这个作品画面刺激冒险，有踏过刀山火海，排除万难的冲劲。。。
配上光芒四射的视频，活力实足。
音乐好听 ...
音乐确实不错 马黑黑 发表于 2025-9-20 22:55
层级问题。图片代码放在svg代码之后，或者，给 #ma 设置 z-index 属性：#ma { ...z-index: 10; }
刚只想到位置，没想到层级。。
最近都是画的小播，这突然来了个漂亮的图片，摸了半天 马黑黑 发表于 2025-9-20 22:56
音乐确实不错
节奏鼓点都密集。。。紧锣密鼓的样纸。。{:4_173:} 花飞飞 发表于 2025-9-20 23:00
节奏鼓点都密集。。。紧锣密鼓的样纸。。
有点震撼吧 花飞飞 发表于 2025-9-20 22:59
刚只想到位置，没想到层级。。
最近都是画的小播，这突然来了个漂亮的图片，摸了半天
HTML代码流中，img标签放在svg标签之前，它被svg挡住了。之前做的时候，我是将svg右移一定距离，当时测试小播可以点击，后面调整一下距离，忘了试点小播 马黑黑 发表于 2025-9-20 23:02
有点震撼吧
听这音乐跟喝了酒一样，让人振奋。。哈哈，再看画面，提神，不瞌睡了{:4_170:} 马黑黑 发表于 2025-9-20 23:04
HTML代码流中，img标签放在svg标签之前，它被svg挡住了。之前做的时候，我是将svg右移一定距离，当时测试 ...
就是因为我预览的时候还看得到小手。。。把页面放大就摸不到了。。
把#ma改为百分比又看到了，所以觉得是位置的事{:4_173:} 这路径图案很有趣，应该是有含义的吧。小播也很霸气，配着这样的背景和音乐，十分振奋。
这个视频也配得好呢{:4_187:} 红影 发表于 2025-9-20 23:23
这路径图案很有趣，应该是有含义的吧。小播也很霸气，配着这样的背景和音乐，十分振奋。
这个视频也配得好 ...
感谢认可 花飞飞 发表于 2025-9-20 23:21
就是因为我预览的时候还看得到小手。。。把页面放大就摸不到了。。
把#ma改为百分比又看到了，所以觉得 ...
判断是准确的 花飞飞 发表于 2025-9-20 23:19
听这音乐跟喝了酒一样，让人振奋。。哈哈，再看画面，提神，不瞌睡了
{:4_172:} 这个人万一功力不足，掉下来了，就危险了呢。有点心惊肉跳。{:4_173:} 梦江南 发表于 2025-9-21 07:41
这个人万一功力不足，掉下来了，就危险了呢。有点心惊肉跳。
进度条是一个安全装置。从惯性上看，若真掉下来，会着陆在进度条上，生命无忧