Fearless

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/tz01.css';
   
3.         #pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/6/fearless.jpg') no-repeat center/cover; }
   
4.         #ma { bottom: 60px; width: 8vw; height: 8vw; z-index: 10; }
   
5.         #progress { position: absolute; bottom: 10px; width: 12vw; height: 12vw; transform: translateX(50px); transition: .4s; }
   
6.         #prog, #track { fill: none; stroke: silver; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
   
7.         #prog { stroke-opacity: .8; }
   
8.         #btnFs { right: 20px; top: 20px; color: #333; border-color: currentColor!important; }
   
9. </style>
   
10. 
    
11. <div id="pa">
    
12.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28263314" autoplay loop></audio>
    
13.         <video class="pd-vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop muted></video>
    
14.         <img id="ma" src="https://638183.freep.cn/638183/small/dcjm.webp" title="ALT+X" alt="" />
    
15.         <svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
16.                 <g id="g1"><title>调节进度</title></g>
    
17.         </svg>
    
18. </div>
    
19. 
    
20. <script type="module">
    
21.         import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
    
22.         import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
    
23. 
    
24.         var dr = Dr.dr(progress);
    
25.         dr.path('M0 -190 Q360 -200,0 190').id('track').addTo('g1');
    
26.         dr.path('M0 -190 Q360 -200,0 190').id('prog').addTo('g1');
    
27. 
    
28.         FS(pa, ma);
    
29. </script>

复制代码

花飞飞

小播点不动了。。看代码没问题，啥情况呢。。
试了下，#ma位置设置用百分比就出来了，不知道哪里有点冲突了。。
14行中间没有空格

花飞飞

这个作品画面刺激冒险，有踏过刀山火海，排除万难的冲劲。。。
配上光芒四射的视频，活力实足。
音乐好听。。。大赞。

杨帆

简约大气，效果惊艳，谢谢马老师精彩分享

马黑黑

花飞飞 发表于 2025-9-20 22:26
小播点不动了。。看代码没问题，啥情况呢。。
试了下，#ma位置设置用百分比就出来了，不知道哪里 ...

层级问题。图片代码放在svg代码之后，或者，给 #ma 设置 z-index 属性：#ma { ... z-index: 10; }

马黑黑

杨帆 发表于 2025-9-20 22:50
简约大气，效果惊艳，谢谢马老师精彩分享

马黑黑

花飞飞 发表于 2025-9-20 22:36
这个作品画面刺激冒险，有踏过刀山火海，排除万难的冲劲。。。
配上光芒四射的视频，活力实足。
音乐好听 ...

音乐确实不错

花飞飞

马黑黑 发表于 2025-9-20 22:55
层级问题。图片代码放在svg代码之后，或者，给 #ma 设置 z-index 属性：#ma { ...  z-index: 10; }

刚只想到位置，没想到层级。。
最近都是画的小播，这突然来了个漂亮的图片，摸了半天

花飞飞

马黑黑 发表于 2025-9-20 22:56
音乐确实不错

节奏鼓点都密集。。。紧锣密鼓的样纸。。

马黑黑

花飞飞 发表于 2025-9-20 23:00
节奏鼓点都密集。。。紧锣密鼓的样纸。。

有点震撼吧

马黑黑

花飞飞 发表于 2025-9-20 22:59
刚只想到位置，没想到层级。。
最近都是画的小播，这突然来了个漂亮的图片，摸了半天

HTML代码流中，img标签放在svg标签之前，它被svg挡住了。之前做的时候，我是将svg右移一定距离，当时测试小播可以点击，后面调整一下距离，忘了试点小播

花飞飞

马黑黑 发表于 2025-9-20 23:02
有点震撼吧

听这音乐跟喝了酒一样，让人振奋。。哈哈，再看画面，提神，不瞌睡了

花飞飞

马黑黑 发表于 2025-9-20 23:04
HTML代码流中，img标签放在svg标签之前，它被svg挡住了。之前做的时候，我是将svg右移一定距离，当时测试 ...

就是因为我预览的时候还看得到小手。。。把页面放大就摸不到了。。
把#ma改为百分比又看到了，所以觉得是位置的事

红影

这路径图案很有趣，应该是有含义的吧。小播也很霸气，配着这样的背景和音乐，十分振奋。
这个视频也配得好呢

马黑黑

红影 发表于 2025-9-20 23:23
这路径图案很有趣，应该是有含义的吧。小播也很霸气，配着这样的背景和音乐，十分振奋。
这个视频也配得好 ...

感谢认可

马黑黑

花飞飞 发表于 2025-9-20 23:21
就是因为我预览的时候还看得到小手。。。把页面放大就摸不到了。。
把#ma改为百分比又看到了，所以觉得 ...

判断是准确的

马黑黑

花飞飞 发表于 2025-9-20 23:19
听这音乐跟喝了酒一样，让人振奋。。哈哈，再看画面，提神，不瞌睡了

梦江南

这个人万一功力不足，掉下来了，就危险了呢。有点心惊肉跳。

马黑黑

梦江南 发表于 2025-9-21 07:41
这个人万一功力不足，掉下来了，就危险了呢。有点心惊肉跳。

进度条是一个安全装置。从惯性上看，若真掉下来，会着陆在进度条上，生命无忧