小辣椒 发表于 2025-8-30 21:12

风里的歌 -- 帖赠:走过岁月 (套用黑黑Club Gtr播放器效果)

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz02.css';
        #pa {margin: 130px 0;
                position: relative;
                display: grid;
                place-items: center; --offsetX: 81px; --bg: url('https://wj.zp68.com/lxx/yunhua/2025/08/30/28.jpg') no-repeat center/cover; --ma-size: 12%; }
        #ma {top: 30%; right: 40%; background: url('https://638183.freep.cn/638183/small/hh1.webp') no-repeat center/cover; filter: sepia(1); transition: .75s; }
        #ma:hover { filter: unset; }
        #btnFs { left: 30px; bottom: 30px; color: beige; border-color: currentColor!important; }
      #lrc {right: 8%;top: 100px; letter-spacing: 4px; writing-mode: vertical-rl; font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkKhaki;}
        #lrc::before { width: 100%; height: 0; background: url('https://xlaj.cn/assets/file/zp/20240118150805.gif ') center; background-clip: text;-webkit-background-clip: text; }
               @keyframes cover1 { from { height: 0; }to { height: 100%; } }
        @keyframes cover2 { from { height: 0; }to { height: 100%; } }
</style>
<div id="pa">
        <audio id="audio" src="https://wj.zp68.com/lxx/yunhua/2025/08/30/fldg.mp3" autoplay loop></audio>
        <video class="pd-vid vid" src="https://wj.zp68.com/lxx/yunhua/2025/08/30/clip.mp4" autoplay loop muted></video>
        <div id="ma">
                <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/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
        var geci = [['0.00', '《风里的歌》',6.89],
['8.31', '帖赠:走过岁月',4.25],
['12.78', '演唱:林琼珑',5.88],
['18.97', '词 曲:林琼珑',6.04],
['26.38', '看着身边朋友四散离去',4.46],
['32.13', '有些悲伤却只能沉默不语',4.60],
['39.08', '心里知道 从此已有了距离',4.65],
['45.03', '我们再也不能 不能回到过去',5.71],
['52.09', '现在我想在风里唱歌',4.86],
['58.26', '再唱一首我们的歌',5.50],
['65.10', '有些话想对你说 ',2.18],
['67.39', '却都没有说',3.54],
['71.12', '可是从前我们 ',2.29],
['73.53', '我们在乎过什么',5.81],
['79.65', '那时候在风里唱歌 ',3.62],
['83.46', '唱我们的歌',3.20],
['86.83', '在风里唱歌 ',2.66],
['89.63', '从不在乎别人如何',3.53],
['93.35', '在风里唱歌 ',2.63],
['96.12', '有过梦也有失望的时候',3.48],
['99.78', '在风里唱歌 如果你听到 ',3.80],
['103.78', '你会不会跟我轻轻的和',5.64],
['109.72', '歌词同步编辑:小辣椒',28.22],
['139.43', '现在我想在风里唱歌',5.81],
['145.55', '再唱一首我们的歌',5.55],
['152.44', '有些话想对你说 ',2.01],
['154.56', '却都没有说',2.88],
['157.59', '可是从前我们 ',3.04],
['160.79', '我们在乎过什么',5.86],
['166.96', '那时候在风里唱歌 ',3.71],
['170.86', '唱我们的歌',3.26],
['174.29', '在风里唱歌 ',2.63],
['177.06', '从不在乎别人如何',3.48],
['180.72', '在风里唱歌 ',2.66],
['183.52', '有过梦也有失望的时候',3.46],
['187.16', '在风里唱歌 如果你听到 ',3.85],
['191.21', '你会不会跟我轻轻的和',5.72],
['199.34', '那时候在风里唱歌 ',3.64],
['203.17', '唱我们的歌',3.33],
['206.68', '在风里唱歌',2.64],
['209.46', ' 从不在乎别人如何',3.52],
['213.17', '在风里唱歌 ',2.62],
['215.93', '有过梦也有失望的时候',3.36],
['219.47', '在风里唱歌 如果你听到 ',3.84],
['223.51', '你会不会跟我轻轻的和',5.88],
['231.80', '那时候在风里唱歌 ',3.61],
['235.60', '唱我们的歌',3.21],
['238.98', '在风里唱歌 ',2.78],
['241.91', '从不在乎别人如何',3.42],
['245.51', '在风里唱歌 ',2.60],
['248.25', '有过梦也有失望的时候',3.55],
['251.99', '在风里唱歌 如果你听到 ',3.70],
['255.88', '你会不会跟我轻轻的和',5.69],
['262.92', '',4.5]
];       
        lrc(pa, geci)
        var dr = Dr.dr(msvg);
        var tt = 10, path = 'M0 -30,-20 0,0 -95,20 0 Z';
        Array.from({length: tt}).forEach((_,k) => {
                dr.path(path, 'none', 'beige', 3).transform(`rotate(${360/tt*k})`);
        });
        FS(pa,ma);
</script>

小辣椒 发表于 2025-8-30 21:13

@走过岁月
感谢岁月的AE制作,小辣椒直接玩一次,{:4_205:}

小辣椒 发表于 2025-8-30 21:15

@马黑黑

感谢黑黑源码分享,小辣椒直接套用玩一个,做帖是很快的,被这个播放器图图难住了,找了好几个出来效果都不漂亮,还是黑黑的漂亮,直接用了黑黑的了{:4_170:}

梦油 发表于 2025-8-30 21:18

这个播放器真漂亮哎!

小辣椒 发表于 2025-8-30 21:19

梦油 发表于 2025-8-30 21:18
这个播放器真漂亮哎!

梦油晚上好,这个是套用黑黑的代码制作,小辣椒现在很多不会了

走过岁月 发表于 2025-8-30 21:20

小辣椒 发表于 2025-8-30 21:13
@走过岁月
感谢岁月的AE制作,小辣椒直接玩一次,

来了

小辣椒 发表于 2025-8-30 21:20

走过岁月 发表于 2025-8-30 21:20
来了

岁月晚上好{:4_187:}

走过岁月 发表于 2025-8-30 21:22

风里的歌,飘荡的蒲公英,很切题

走过岁月 发表于 2025-8-30 21:23

版面设计的很好

走过岁月 发表于 2025-8-30 21:24

谢谢小辣椒

小辣椒 发表于 2025-8-30 21:25

走过岁月 发表于 2025-8-30 21:22
风里的歌,飘荡的蒲公英,很切题

很喜欢的一首歌,这个画面是你设计的效果{:4_170:}

小辣椒 发表于 2025-8-30 21:25

走过岁月 发表于 2025-8-30 21:23
版面设计的很好
就做了个图,加了歌词同步进去

小辣椒 发表于 2025-8-30 21:26

走过岁月 发表于 2025-8-30 21:24
谢谢小辣椒

干嘛这么客气,其实都是你的东西{:4_205:}

红影 发表于 2025-8-30 22:48

画面好漂亮,左侧朦胧女子身影很飘逸,蒲公英也很漂亮。
欣赏亲爱的好帖,岁月收礼开心{:4_199:}

红影 发表于 2025-8-30 22:50

这歌词同步还是变色的呢,特别漂亮{:4_199:}

杨帆 发表于 2025-8-30 23:04

谢谢小辣椒精彩制作,祝走过岁月版主收礼开心{:4_191:}

马黑黑 发表于 2025-8-31 08:45

小辣椒 发表于 2025-8-30 21:15
@马黑黑

感谢黑黑源码分享,小辣椒直接套用玩一个,做帖是很快的,被这个播放器图图难住了,找了好几个 ...

平时注意收集小图片,用的时候可选择的余地会很大。

马黑黑 发表于 2025-8-31 08:47

蓝色系主色,飘飞的蒲公英,隐现的人影,营造出了妙不可言的音画环境。好帖。

梦江南 发表于 2025-8-31 11:45

漂亮!这个小播中间还加了网条,最喜欢旁边变色的歌词了。小辣椒厉害!{:4_187:}

梦如影音 发表于 2025-8-31 12:40

欣赏老师的精彩制作{:5_116:}{:5_116:}{:5_116:}
页: [1] 2 3 4
查看完整版本: 风里的歌 -- 帖赠:走过岁月 (套用黑黑Club Gtr播放器效果)