花潮论坛

搜索
热搜: 活动 交友 discuz
查看: 95|回复: 62

Fearless

[复制链接]
  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

    发表于 2025-9-20 21:10 | 显示全部楼层 |阅读模式

    请马上登录,朋友们都在花潮里等着你哦:)

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x
    本帖最后由 马黑黑 于 2025-9-20 22:53 编辑

    调节进度

    评分

    参与人数 3威望 +110 金钱 +220 经验 +110 收起 理由
    红影 + 50 + 100 + 50 赞一个!
    杨帆 + 30 + 60 + 30 精彩帖子!
    花飞飞 + 30 + 60 + 30 很给力!

    查看全部评分

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-9-20 21:10 | 显示全部楼层
    本帖最后由 马黑黑 于 2025-9-20 22:53 编辑

    帖子代码

    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. <div id="pa">
    11.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28263314" autoplay loop></audio>
    12.         <video class="pd-vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop muted></video>
    13.         <img id="ma" src="https://638183.freep.cn/638183/small/dcjm.webp" title="ALT+X" alt="" />
    14.         <svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    15.                 <g id="g1"><title>调节进度</title></g>
    16.         </svg>
    17. </div>

    18. <script type="module">
    19.         import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
    20.         import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';

    21.         var dr = Dr.dr(progress);
    22.         dr.path('M0 -190 Q360 -200,0 190').id('track').addTo('g1');
    23.         dr.path('M0 -190 Q360 -200,0 190').id('prog').addTo('g1');

    24.         FS(pa, ma);
    25. </script>
    复制代码


    评分

    参与人数 2威望 +80 金钱 +160 经验 +80 收起 理由
    红影 + 50 + 100 + 50 赞一个!
    花飞飞 + 30 + 60 + 30 很给力!

    查看全部评分

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-9-20 22:26 | 显示全部楼层
    本帖最后由 花飞飞 于 2025-9-20 22:33 编辑

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

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-9-20 22:36 | 显示全部楼层
    这个作品画面刺激冒险,有踏过刀山火海,排除万难的冲劲。。。
    配上光芒四射的视频,活力实足。
    音乐好听。。。大赞。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2025-11-30 00:22
  • 签到天数: 380 天

    [LV.9]以坛为家II

    297

    主题

    2548

    回帖

    1万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生鹰傲苍穹飞龙在天王者至尊大将风范花潮版主

    发表于 2025-9-20 22:50 | 显示全部楼层
    简约大气,效果惊艳,谢谢马老师精彩分享
    ★青春是一个人的精神生命,奋斗是一个人最大的体面,学习是一个人最美的姿态。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

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

    层级问题。图片代码放在svg代码之后,或者,给 #ma 设置 z-index 属性:#ma { ... z-index: 10; }
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-9-20 22:55 | 显示全部楼层
    杨帆 发表于 2025-9-20 22:50
    简约大气,效果惊艳,谢谢马老师精彩分享

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

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

    音乐确实不错
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

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

    刚只想到位置,没想到层级。。
    最近都是画的小播,这突然来了个漂亮的图片,摸了半天
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-9-20 23:00 | 显示全部楼层

    节奏鼓点都密集。。。紧锣密鼓的样纸。。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-9-20 23:02 | 显示全部楼层
    花飞飞 发表于 2025-9-20 23:00
    节奏鼓点都密集。。。紧锣密鼓的样纸。。

    有点震撼吧
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-9-20 23:04 | 显示全部楼层
    花飞飞 发表于 2025-9-20 22:59
    刚只想到位置,没想到层级。。
    最近都是画的小播,这突然来了个漂亮的图片,摸了半天

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

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-9-20 23:19 | 显示全部楼层

    听这音乐跟喝了酒一样,让人振奋。。哈哈,再看画面,提神,不瞌睡了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

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

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

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-17 10:56
  • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-9-20 23:23 | 显示全部楼层
    这路径图案很有趣,应该是有含义的吧。小播也很霸气,配着这样的背景和音乐,十分振奋。
    这个视频也配得好呢
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

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

    感谢认可
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

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

    判断是准确的
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-9-20 23:25 | 显示全部楼层
    花飞飞 发表于 2025-9-20 23:19
    听这音乐跟喝了酒一样,让人振奋。。哈哈,再看画面,提神,不瞌睡了

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-27 09:01
  • 签到天数: 591 天

    [LV.9]以坛为家II

    377

    主题

    1万

    回帖

    3万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪缤纷心情心曲飞扬花好月圆飞龙在天音画大师花潮贵宾

    发表于 2025-9-21 07:41 | 显示全部楼层
    这个人万一功力不足,掉下来了,就危险了呢。有点心惊肉跳。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-9-21 09:38 | 显示全部楼层
    梦江南 发表于 2025-9-21 07:41
    这个人万一功力不足,掉下来了,就危险了呢。有点心惊肉跳。

    进度条是一个安全装置。从惯性上看,若真掉下来,会着陆在进度条上,生命无忧
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持:DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-11-30 15:08 , Processed in 0.112490 second(s), 31 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表