小辣椒 发表于 2025-9-13 22:17

你有没有真的爱过我 （学习黑黑真实与谎言播放器效果）


<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';
    #pa { margin: 150px 0 50px calc(50% - 481px); width: 1400px; height: 800px; background: #000 url('https://wj.zp68.com/lxx/yunhua/2025/09/13/bj.jpg'); no-repeat center/cover; --ma-size: 100%; }
    .wrap { position: absolute; bottom: 200px; aspect-ratio: 1/1; width: 5%; fleft:81%;top:83%;filter: drop-shadow(0 240px 10px rgba(0,20,0,.5)); }
      .son { position: absolute;top: 40%; width: 50%; height: 10%; background: linear-gradient(75deg, olive, snow, tan); border-radius: 100% 0; box-shadow: 0 0 200px cyan; transform-origin: 100% 100%; }
    #btnFs { right: 48%; top: -120px; color: #eee; }

#vid { position: absolute; width: 100%; height: 100%;-webkit-mask: radial-gradient(circle, Black, Black ,rgba(0,0,0,.25),transparent, transparent);}   

#vid1 {position: absolute;width: 250px; height: 250px; opacity: .7;top: 20%;left: 15%;transform: translate(-50%, -50%);object-fit: cover;border-radius: 50%;mix-blend-mode: screen; pointer-events: none;z-index: 12;
}

#vid2 {position: absolute;width: 250px; height: 250px;opacity: .7;top: 70%; right: -6%; transform: translate(-50%, -50%);object-fit: cover; border-radius: 50%; mix-blend-mode: screen;pointer-events: none;z-index: 32;
}
    opacity: .95;
}

#lrc { font:normal 2.2em 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%; } }      

#dt2{ position: absolute; width:54px; height: 266px; top: 200px; right:32px;}
#dt3{ position: absolute; width: 32px; height: 32px; top: 50px; left: 920px; }

</style>

<div id="pa">
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
    <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/7ce5-audiofreehighqps/E8/AB/GKwRIW4L9gTPACAAAAOsF_Mr.m4a" autoplay loop></audio>

<video id="vid" src="https://wj.zp68.com/lxx/yunhua/2025/09/13/clip.mp4" autoplay="" loop="" muted=""></video>
<video id="vid1" src="https://wj.zp68.com/lxx/yunhua/2025/09/13/clip.mp4" autoplay loop muted></video>
<video id="vid2" src="https://wj.zp68.com/lxx/yunhua/2025/09/13/clip.mp4" autoplay loop muted></video>


    <div class="wrap">
      <div id="ma" class="hue-rotate"></div>
    </div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';

import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
        var geci = [['0.00', '你有没有真的爱过我',6.98],
['7.35', '歌手：谈柒柒',3.27],
['10.79', '你有没有真的爱过我',4.72],
['15.76', '为何问你你总是不说',4.81],
['20.82', '热烈相拥过',2.33],
['23.27', '又不再交错',2.41],
['25.81', '感情只剩模糊的轮廓',4.75],
['30.81', '你有没有真的爱过我',4.77],
['35.83', '哪怕一个坚定的承诺',4.64],
['40.71', '从无话不说',2.34],
['43.17', '到无话可说',2.45],
['45.75', '故事皆俗任眼泪滑落',6.93],
['53.04', '作词：廖伟志',1.90],
['55.04', '编曲：廖伟志',1.90],
['57.04', '合唱团：盛夏合唱团',1.90],
['59.04', '制作人：廖伟志',4.65],
['63.94', '发行：北京班客音乐 ',6.47],
['70.75', '你有没有真的爱过我',4.73],
['75.73', '你的回应是一直沉默',4.65],
['80.62', '只剩下落寞',2.45],
['83.20', '我有什么错',2.39],
['85.72', '短暂柔情似流星划落',4.75],
['90.72', '你有没有真的爱过我',4.87],
['95.85', '我是你诗的那个段落',4.71],
['100.81', '落款第几页',2.37],
['103.30', '第几次临摹',2.45],
['105.88', '还是匆匆一瞥就略过',5.18],
['111.33', 'LRC编辑：小辣椒',18.50],
['130.80', '你有没有真的爱过我',4.76],
['135.81', '我可曾是你情感寄托',4.71],
['140.77', '今夜雾蒙蒙',2.45],
['143.35', '无情又冷漠',2.49],
['145.97', '似梦似醒憧憬被打破',4.62],
['150.83', '你有没有真的爱过我',4.76],
['155.84', '酒杯清浅我没有把握',4.74],
['160.83', '回忆上了锁',2.19],
['163.13', '我望月独酌',2.44],
['165.70', '还不死心承受着折磨',4.94],
['170.90', '你有没有真的爱过我',4.72],
['175.87', '为何问你你总是不说',4.67],
['180.79', '热烈相拥过',2.48],
['183.40', '又不再交错',2.26],
['185.78', '感情只剩模糊的轮廓',4.87],
['190.91', '你有没有真的爱过我',4.62],
['195.77', '哪怕一个坚定的承诺',4.70],
['200.72', '从无话不说',2.39],
['203.24', '到无话可说',2.65],
['206.03', '故事皆俗任眼泪滑落',4.67],
['210.95', '谢谢欣赏',21.26],
['233.33', '`;',4.5]
];       
        lrc(pa, geci)


    FS(pa, ma);
    const tt = 12;
        Array.from({length: tt}).forEach( (s, k) => {
                s = document.createElement('span');
                s.className = 'son';
                s.style.setProperty('transform', `rotate(${360 / tt * k}deg) translate(-8px)`);
                ma.appendChild(s);
        });
</script>

小辣椒 发表于 2025-9-13 22:19

想做的漂亮一点，就是感觉不满意，结果上去同样的三个背景视频@马黑黑

小辣椒 发表于 2025-9-13 22:20

歌词也是位置调整不好，就这样了{:4_172:}

马黑黑 发表于 2025-9-13 22:51

小辣椒 发表于 2025-9-13 22:20
歌词也是位置调整不好，就这样了

#lrc { font:normal 2.2em Microsoft YaHei; sans-serif; color:DarkKhaki;}

比如想让它处于上方靠右：

#lrc { right: 20px; top: 20px; font:normal 2.2em Microsoft YaHei; sans-serif; color:DarkKhaki;}

想让它在下方居中：

#lrc { bottom: 20px; font:normal 2.2em Microsoft YaHei; sans-serif; color:DarkKhaki;}


非常灵活

小辣椒 发表于 2025-9-13 22:57

马黑黑 发表于 2025-9-13 22:51
#lrc { font:normal 2.2em Microsoft YaHei; sans-serif; color:DarkKhaki;}

比如想让它处于上方靠右 ...

谢谢黑黑，我是想改歌词的字体，这个位置对我的闪动图片还是合适的，再下来一点到是可以试一下，现在太迟了，明天再调了

马黑黑 发表于 2025-9-13 23:01

小辣椒 发表于 2025-9-13 22:57
谢谢黑黑，我是想改歌词的字体，这个位置对我的闪动图片还是合适的，再下来一点到是可以试一下，现在太迟 ...

字体设置你去查一下就行，过去怎么做，现在怎么做

小辣椒 发表于 2025-9-13 23:06

马黑黑 发表于 2025-9-13 23:01
字体设置你去查一下就行，过去怎么做，现在怎么做

以前的方法没有成功，也是没有时间测试，以后再说，我先下了，晚安，回帖也是来不及了{:4_198:}

马黑黑 发表于 2025-9-13 23:40

小辣椒 发表于 2025-9-13 23:06
以前的方法没有成功，也是没有时间测试，以后再说，我先下了，晚安，回帖也是来不及了

字体设置有那么难吗

梦江南 发表于 2025-9-14 08:42

好漂亮的美女背景，特别欢喜这歌词的颜色从上到下的变化。{:4_187:}

红影 发表于 2025-9-14 09:20

亲爱的好创意，这样的三个视频的效果特别棒。给亲爱的点赞{:4_199:}

红影 发表于 2025-9-14 09:21

歌词的高亮怎么从上到下了，横向的歌词还是从左到右的好啊{:4_173:}

梦油 发表于 2025-9-14 10:06

《小辣椒音乐》——天籁之音

老谟深虑 发表于 2025-9-14 12:30

            好作品，欣赏点赞！

樵歌 发表于 2025-9-14 13:32

我忘记唱的什么 了，只觉得好啦，有和声，是我喜欢滴，不过最喜欢那走路的姿式了{:4_170:}

樵歌 发表于 2025-9-14 13:35

这不是冬小雨最喜欢的模特么，瞧人家那臀部扭得多么诱人哇{:4_170:}

清茶煮雪 发表于 2025-9-15 10:08

本帖最后由 菲儿 于 2025-9-15 10:09 编辑

欣赏小辣椒佳作！好漂亮的美女背景{:4_199:}，歌词的颜色制作真好看，歌曲好听{:4_204:}
页: [1]
查看完整版本: 你有没有真的爱过我 （学习黑黑真实与谎言播放器效果）