花潮论坛

搜索
热搜: 活动 交友 discuz
查看: 140|回复: 103

黑暗时分

[复制链接]
  • 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 07:44 | 显示全部楼层 |阅读模式

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

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

    x
    ALT+X 调节进度

    评分

    参与人数 5威望 +170 金钱 +340 经验 +170 收起 理由
    朵拉 + 30 + 60 + 30 赞一个!
    花飞飞 + 30 + 60 + 30 很给力!
    杨帆 + 30 + 60 + 30 很给力!
    红影 + 50 + 100 + 50 赞一个!
    梦江南 + 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-21 07:49 | 显示全部楼层
    <style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/darkhours.webp') no-repeat center/cover; } #progress { position: absolute; width: 15vw; height: 15vw; transition: .4s; } #prog, #track { fill: none; stroke: url(#lGrd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; } #prog { stroke: lightblue; stroke-opacity: .4; } #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); } #btnFs { bottom: 20px; color: tan; border-color: currentColor!important; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=413961014" autoplay loop></audio> <video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/74/5b4971fc323af.mp4" autoplay loop muted></video> <svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"> <defs> <linearGradient id="lGrd" gradientTransform="rotate(30)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </linearGradient> </defs> <g id="g1" class="brightness"><title>ALT+X</title></g> <g id="g2"><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.ellipse(0, 0, 140, 70,'transparent','url(#lGrd)',10).addTo(g1).rotates(5,180); dr.circle(0,0,180).id('track').addTo(g2); dr.circle(0,0,180).id('prog').addTo(g2); FS(pa, g1); </script>

    评分

    参与人数 2威望 +80 金钱 +160 经验 +80 收起 理由
    花飞飞 + 30 + 60 + 30 很给力!
    红影 + 50 + 100 + 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-21 07:55 | 显示全部楼层
    本帖小播:

    (一)大圆做进度条、5个椭圆做播放/暂停控制器;

    (二)使用线性渐变描边:在svg中创建简单的线性渐变(代码 15~20行),在CSS对应的选择器通过 stroke: url(#渐变ID) 指定使用svg创建的渐变描边(代码第 5 行、第 7 行),也可在 svgdr 中指定。

    评分

    参与人数 2威望 +80 金钱 +160 经验 +80 收起 理由
    花飞飞 + 30 + 60 + 30 很给力!
    红影 + 50 + 100 + 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-21 07:56 | 显示全部楼层
    音乐原名 Dark Hours,可理解为黑暗时刻、黑暗时分
    回复 支持 反对

    使用道具 举报

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

    [LV.9]以坛为家II

    377

    主题

    1万

    回帖

    3万

    积分

    贵宾

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

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

    发表于 2025-9-21 09:03 | 显示全部楼层
    第一次看到黑黑老师用黑屏做帖。
    回复 支持 反对

    使用道具 举报

  • 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:36 | 显示全部楼层
    梦江南 发表于 2025-9-21 09:03
    第一次看到黑黑老师用黑屏做帖。

    用的不少的
    回复 支持 反对

    使用道具 举报

  • 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-21 10:24 | 显示全部楼层
    绘制的小播和进度条都使用了设置好的渐变方式,两者相互呼应,真漂亮
     
    回复 支持 反对

    使用道具 举报

  • 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-21 10:28 | 显示全部楼层
    这视频好看,从黑暗中迸发出的能量
     
    回复 支持 反对

    使用道具 举报

  • 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 10:44 | 显示全部楼层
    红影 发表于 2025-9-21 10:28
    这视频好看,从黑暗中迸发出的能量

    视频确实很好
    回复 支持 反对

    使用道具 举报

  • 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 10:47 | 显示全部楼层
    红影 发表于 2025-9-21 10:24
    绘制的小播和进度条都使用了设置好的渐变方式,两者相互呼应,真漂亮

    渐变带来惊喜。

    今天休息,等下升级一下 svgdr 的 gradient 指令,让 stop 标签的创建能接收参数,而不仅仅是原来的只能接收字符串参数,这样会更方便创建svg渐变。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-29 23:17
  • 签到天数: 75 天

    [LV.6]常住居民II

    588

    主题

    2万

    回帖

    7万

    积分

    管理员

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

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生奔放热烈缤纷心情鹰傲苍穹飞龙在天王者至尊大将风范天籁妙音妙笔生花麦霸歌神共看流星侠骨柔肠心想事成开朗大方花潮管理

    QQ
    发表于 2025-9-21 11:22 | 显示全部楼层
    音画唯美
    如果信命,所有的偶然都是注定!
    如果不信,所有的注定都是偶然!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-29 23:17
  • 签到天数: 75 天

    [LV.6]常住居民II

    588

    主题

    2万

    回帖

    7万

    积分

    管理员

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

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生奔放热烈缤纷心情鹰傲苍穹飞龙在天王者至尊大将风范天籁妙音妙笔生花麦霸歌神共看流星侠骨柔肠心想事成开朗大方花潮管理

    QQ
    发表于 2025-9-21 11:22 | 显示全部楼层
    制作大气,太棒了!
    如果信命,所有的偶然都是注定!
    如果不信,所有的注定都是偶然!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-29 23:17
  • 签到天数: 75 天

    [LV.6]常住居民II

    588

    主题

    2万

    回帖

    7万

    积分

    管理员

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

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生奔放热烈缤纷心情鹰傲苍穹飞龙在天王者至尊大将风范天籁妙音妙笔生花麦霸歌神共看流星侠骨柔肠心想事成开朗大方花潮管理

    QQ
    发表于 2025-9-21 11: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-21 11:58 | 显示全部楼层
    偶然~ 发表于 2025-9-21 11:22
    制作大气,太棒了!

    回复 支持 反对

    使用道具 举报

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

    [LV.9]以坛为家II

    297

    主题

    2548

    回帖

    1万

    积分

    版主

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

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

    发表于 2025-9-21 18:10 | 显示全部楼层
    制作唯美,效果惊艳,谢谢马老师精彩示范
    ★青春是一个人的精神生命,奋斗是一个人最大的体面,学习是一个人最美的姿态。
    回复 支持 反对

    使用道具 举报

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

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

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

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

    发表于 2025-9-21 19:01 | 显示全部楼层
    url(#lGrd)这个渐变贯穿始终,小播和进度条的颜色都进行了调用。。
    5金95红渐变同时进行了30度的旋转。。
    这样的色彩设置,令小播和进度条更加梦幻,比单一色彩漂亮多了。。
    回复 支持 反对

    使用道具 举报

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

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

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

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

    发表于 2025-9-21 19:03 | 显示全部楼层
    马黑黑 发表于 2025-9-21 07:56
    音乐原名 Dark Hours,可理解为黑暗时刻、黑暗时分

    背景暗色,小播靓色,色彩对比强烈,效果明显。。
    音乐好听。恢宏大气,旋律激昂。。
    回复 支持 反对

    使用道具 举报

  • 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 19:40 | 显示全部楼层
    花飞飞 发表于 2025-9-21 19:03
    背景暗色,小播靓色,色彩对比强烈,效果明显。。
    音乐好听。恢宏大气,旋律激昂。。

    矮油,老是说辣么好听的话
    回复 支持 反对

    使用道具 举报

  • 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 19:40 | 显示全部楼层
    花飞飞 发表于 2025-9-21 19:01
    url(#lGrd)这个渐变贯穿始终,小播和进度条的颜色都进行了调用。。
    5金95红渐变同时进行了30度的旋转。。
    ...

    单一色彩其实也挺好,不要见异思迁
    回复 支持 反对

    使用道具 举报

  • 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-21 19:42 | 显示全部楼层

    和小播相互映衬,真好
     
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2025-11-30 15:46 , Processed in 0.113953 second(s), 33 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

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