论坛 › 动画音画 › 充电

马黑黑 发表于 2024-8-24 08:19

充电

<style>
#mama {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp2/charge.webp') no-repeat center/cover;
        box-shadow: 0 0 8px rgba(0,0,0,.5);
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mama > video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        pointer-events: none;
}
</style>

<div id="mama" class="mama">
        <audio src="https://music.163.com/song/media/outer/url?id=1403044026" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/2402760/00/01/83/5b4ac4f6d2100.mp4" autoplay loop muted></video>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/charger_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: 0,
                player_css: 'left: 50%; transform: translateX(-50%); bottom: 80px; color: white; --ww: 200px; --hh: 30px; --track: rgba(255,255, 255,.25); --prog: rgba(0,128,0,.8);',
                lrc_css: 'left: 50%; transform: translateX(-50%); bottom: 20px; --bg: linear-gradient( #eee, #eeeeee80); color: #666;',
                fs_css: 'right: 20px; bottom: 20px; --bg: transparent; --color: #eee;',
        });
};

var geci = `
        充电
        歌手 ：邢翰维 / Yutann
        这是第一次和你一起过冬天
        一起压马路你手穿过我指间
        想和你
        一起过冬天
        一起过冬天
        和你过冬天
        温暖的被窝里你的秀发划过指尖
        喜欢把你像只小猫抱在胸前
        想和你
        一起过 冬天
        一起过 冬天
        和你过 冬天
        下着雪 一片片
        落你双肩
        天再冷 也不会
        把这爱冻结
        心里面 爱着你
        一遍又一遍
        一天又一天
        下着雪 一片片
        落你双肩
        天再冷 也不会
        把这爱冻结
        心里面 爱着你
        一遍又一遍
        一天又一天
        我看着你坐在镜子面前化着妆
        你给我一一介绍这瓶或那盒棒
        一会儿画个眼影再慢慢打个高光
        堪称世界美景你美的让人发慌
        你说冬天要画个奶茶色系
        钻进我怀里充电你眼神让我着迷
        属于我的你不能让别人靠近
        只有我能对你温柔或者暴力
        整天只想和你在一起
        我真的没有能力离开你
        爱上你一切不由自己
        我心里想什么你都会理解
        下着雪 一片片
        落你双肩
        天再冷 也不会
        把这爱冻结
        心里面 爱着你
        一遍又一遍
        一天又一天
        下着雪 一片片
        落你双肩
        天再冷 也不会
        把这爱冻结
        心里面 爱着你
        一遍又一遍
        一天又一天
        …………
        作词 : 邢翰维/Yutann
        作曲 : 邢翰维
        编曲：Hsing Dykk, Yutann
`;
</script>

马黑黑 发表于 2024-8-24 08:19

<h2>帖子代码：</h>
<div class="hE"><pre>
&lt;style&gt;
#mama {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp2/charge.webp') no-repeat center/cover;
        box-shadow: 0 0 8px rgba(0,0,0,.5);
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mama &gt; video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        pointer-events: none;
}
&lt;/style&gt;

&lt;div id="mama" class="mama"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=1403044026" autoplay loop&gt;&lt;/audio&gt;
        &lt;video src="https://img.tukuppt.com/video_show/2402760/00/01/83/5b4ac4f6d2100.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/charger_yslrc.js';
document.body.appendChild(sf);

sf.onload = () =&gt; {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: 0,
                player_css: 'left: 50%; transform: translateX(-50%); bottom: 80px; color: white; --ww: 200px; --hh: 30px; --track: rgba(255,255, 255,.25); --prog: rgba(0,128,0,.8);',
                lrc_css: 'left: 50%; transform: translateX(-50%); bottom: 20px; --bg: linear-gradient( #eee, #eeeeee80); color: #666;',
                fs_css: 'right: 20px; bottom: 20px; --bg: transparent; --color: #eee;',
        });
};

var geci = `
        充电
        歌手 ：邢翰维 / Yutann
        这是第一次和你一起过冬天
        一起压马路你手穿过我指间
        想和你
        一起过冬天
        一起过冬天
        和你过冬天
        温暖的被窝里你的秀发划过指尖
        喜欢把你像只小猫抱在胸前
        想和你
        一起过 冬天
        一起过 冬天
        和你过 冬天
        下着雪 一片片
        落你双肩
        天再冷 也不会
        把这爱冻结
        心里面 爱着你
        一遍又一遍
        一天又一天
        下着雪 一片片
        落你双肩
        天再冷 也不会
        把这爱冻结
        心里面 爱着你
        一遍又一遍
        一天又一天
        我看着你坐在镜子面前化着妆
        你给我一一介绍这瓶或那盒棒
        一会儿画个眼影再慢慢打个高光
        堪称世界美景你美的让人发慌
        你说冬天要画个奶茶色系
        钻进我怀里充电你眼神让我着迷
        属于我的你不能让别人靠近
        只有我能对你温柔或者暴力
        整天只想和你在一起
        我真的没有能力离开你
        爱上你一切不由自己
        我心里想什么你都会理解
        下着雪 一片片
        落你双肩
        天再冷 也不会
        把这爱冻结
        心里面 爱着你
        一遍又一遍
        一天又一天
        下着雪 一片片
        落你双肩
        天再冷 也不会
        把这爱冻结
        心里面 爱着你
        一遍又一遍
        一天又一天
        …………
        作词 : 邢翰维/Yutann
        作曲 : 邢翰维
        编曲：Hsing Dykk, Yutann
`;
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-8-24 08:20

插件说明：原生lrc歌词同步之充电器播放器 (52qingyin.cn)

朵拉 发表于 2024-8-24 08:30

这个效果 酷炫耶~~

红影 发表于 2024-8-24 09:40

这个有趣，还真找了个充电桩背景啊，而且这背景很漂亮很现代{:4_199:}

红影 发表于 2024-8-24 09:41

去黑黑那看了，现在原生歌词封装已经12个了，厉害{:4_187:}

红影 发表于 2024-8-24 09:51

进度条底色和进度条颜色都设置了透明度，可以让进度时间被显示{:4_187:}

马黑黑 发表于 2024-8-24 11:16

朵拉 发表于 2024-8-24 08:30
这个效果 酷炫耶~~

上午好

马黑黑 发表于 2024-8-24 11:16

红影 发表于 2024-8-24 09:41
去黑黑那看了，现在原生歌词封装已经12个了，厉害

有空就弄弄

马黑黑 发表于 2024-8-24 11:17

红影 发表于 2024-8-24 09:40
这个有趣，还真找了个充电桩背景啊，而且这背景很漂亮很现代

要爆炸的样纸{:4_170:}

非常伤心 发表于 2024-8-24 12:19

凡哥？{:5_114:}

四海八荒 发表于 2024-8-24 14:28

只能羡慕，学不会{:4_173:}

马黑黑 发表于 2024-8-24 15:02

非常伤心 发表于 2024-8-24 12:19
凡哥？

{:4_181:}

马黑黑 发表于 2024-8-24 15:02

四海八荒 发表于 2024-8-24 14:28
只能羡慕，学不会

{:4_190:}

红影 发表于 2024-8-24 15:13

马黑黑 发表于 2024-8-24 11:16
有空就弄弄

都很好呢，也是美好的收获{:4_187:}

红影 发表于 2024-8-24 15:13

马黑黑 发表于 2024-8-24 11:17
要爆炸的样纸

哈哈，充电充过头了{:4_173:}

马黑黑 发表于 2024-8-24 15:34

红影 发表于 2024-8-24 15:13
哈哈，充电充过头了

充电讲究安全措施

红影 发表于 2024-8-24 17:44

马黑黑 发表于 2024-8-24 15:34
充电讲究安全措施

这个帖子特别现代感，挺棒的{:4_199:}

姚云裳 发表于 2024-8-24 19:00

好强的视觉效果，欣赏加学习，问好

马黑黑 发表于 2024-8-24 20:00

姚云裳 发表于 2024-8-24 19:00
好强的视觉效果，欣赏加学习，问好

这是视频效果

查看完整版本: 充电