论坛 › 动画音画 › 激越东川

马黑黑 发表于 2024-8-18 07:48

激越东川

<style>
#mama {
        margin: 130px 0 30px calc(50% - 720px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp/dsir.webp') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        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=1393834123" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbe50515ab.mp4" autoplay loop muted></video>
</div>

<script>
var geci = `激越东川\n作词：戴青\n作曲：张楠\n这里有漫山遍野的铜草花\n这里有高耸入云的大井架\n东川人啊来自八方\n东川人啊理想远大\n头顶蓝天，身披云霞\n威武刚劲，昂扬挺拔\n铿锵激昂的钻机声\n伴着新中国前进的步伐\n这里有巍峨的牯牛群山\n这里有绚烂的红土地画\n东川人啊历经坎坷\n东川人啊意气风发\n风雨侵蚀，不屈不挠\n放眼未来，心系天下\n转型发展的号角声\n引领着东川向未来进发\n风雨侵蚀，不屈不挠\n放眼未来，心系天下\n转型发展的号角声\n引领着东川向未来进发\n引领着东川向未来进发\n歌手：郝力勇\n2024-8-18\n\n\n`;

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

sf.onload = () => {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: -1,
                pinpu: { num: 40, color: 'linear-gradient(orange, transparent, orange)' },
                player_css: 'left: 100px; bottom: 100px; color: silver; --len: 3px;',
                lrc_css: 'left: 50%; transform: translateX(-50%); top: 30px; --bg: linear-gradient( #c5512830, #c55128); color: #999;',
                fs_css: 'right: 20px; top: 20px; --bg: transparent; --color: #6e1400;',
        });
};
</script>

马黑黑 发表于 2024-8-18 07:49

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#mama {
        margin: 30px 0 30px calc(50% - 641px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp/dsir.webp') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        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=1393834123" autoplay loop&gt;&lt;/audio&gt;
        &lt;video src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbe50515ab.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
var geci = `激越东川\n作词：戴青\n作曲：张楠\n这里有漫山遍野的铜草花\n这里有高耸入云的大井架\n东川人啊来自八方\n东川人啊理想远大\n头顶蓝天，身披云霞\n威武刚劲，昂扬挺拔\n铿锵激昂的钻机声\n伴着新中国前进的步伐\n这里有巍峨的牯牛群山\n这里有绚烂的红土地画\n东川人啊历经坎坷\n东川人啊意气风发\n风雨侵蚀，不屈不挠\n放眼未来，心系天下\n转型发展的号角声\n引领着东川向未来进发\n风雨侵蚀，不屈不挠\n放眼未来，心系天下\n转型发展的号角声\n引领着东川向未来进发\n引领着东川向未来进发\n歌手：郝力勇\n2024-8-18\n\n\n`;

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

sf.onload = () =&gt; {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: -1,
                pinpu: { num: 40, color: 'linear-gradient(orange, transparent, orange)' },
                player_css: 'left: 100px; bottom: 100px; color: silver; --len: 3px;',
                lrc_css: 'left: 50%; transform: translateX(-50%); top: 30px; --bg: linear-gradient( #c5512830, #c55128); color: #999;',
                fs_css: 'right: 20px; top: 20px; --bg: transparent; --color: #6e1400;',
        });
};
&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-18 07:53

本帖测试原生lrc歌词同步之圆环斜频谱播放器，插件详情请查阅：原生lrc歌词同步之圆环斜频谱播放器 (52qingyin.cn)

红影 发表于 2024-8-18 09:02

这首歌还很正能量呢。{:4_187:}

红影 发表于 2024-8-18 09:03

又是一个新的原生歌曲封装，这个圆环斜频谱播放器漂亮，像光明的太阳，特别符合帖子氛围{:4_199:}

红影 发表于 2024-8-18 09:04

这个帖子里黑黑把average:也调了，这个不容易，必然要听个几遍才能感觉到偏差呢{:4_187:}

红影 发表于 2024-8-18 09:06

画面和歌曲相符，视频也选择了很激昂的效果。欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2024-8-18 09:40

红影 发表于 2024-8-18 09:04
这个帖子里黑黑把average:也调了，这个不容易，必然要听个几遍才能感觉到偏差呢

都是估摸的，俺数学差

红影 发表于 2024-8-18 10:27

马黑黑 发表于 2024-8-18 09:40
都是估摸的，俺数学差

这个和数学无关，和听力关系更大{:4_173:}

马黑黑 发表于 2024-8-18 10:29

红影 发表于 2024-8-18 10:27
这个和数学无关，和听力关系更大

俺耳朵也差

红影 发表于 2024-8-18 10:54

马黑黑 发表于 2024-8-18 10:29
俺耳朵也差

那就跟听力也无关，跟节奏感有关{:4_173:}

马黑黑 发表于 2024-8-18 12:06

红影 发表于 2024-8-18 10:54
那就跟听力也无关，跟节奏感有关

五音不全，没啥节奏感

小辣椒 发表于 2024-8-18 13:48

黑黑，最近果然每天拖地，每天有新的东西想出来，原来拖地真的有这个效果，脑子会更加聪明，可惜小辣椒从来不拖地的{:4_173:}

马黑黑 发表于 2024-8-18 13:51

小辣椒 发表于 2024-8-18 13:48
黑黑，最近果然每天拖地，每天有新的东西想出来，原来拖地真的有这个效果，脑子会更加聪明，可惜小辣椒从来 ...

拖地还可以锻炼身体，估计今后会进入火星奥运，口号是：拖地使人四肢发达头脑灵光！

小辣椒 发表于 2024-8-18 13:52

马黑黑 发表于 2024-8-18 13:51
拖地还可以锻炼身体，估计今后会进入火星奥运，口号是：拖地使人四肢发达头脑灵光！

可惜小辣椒太懒了，从来不拖地，拖地感觉太吃力了{:4_198:}

梦江南 发表于 2024-8-18 15:31

老师辛苦了！欣赏学习了！{:4_187:}

红影 发表于 2024-8-18 20:42

马黑黑 发表于 2024-8-18 12:06
五音不全，没啥节奏感

这样自我贬低没必要吧，那就只能估算了{:4_173:}

马黑黑 发表于 2024-8-18 21:15

红影 发表于 2024-8-18 20:42
这样自我贬低没必要吧，那就只能估算了

实事求是

红影 发表于 2024-8-18 22:19

马黑黑 发表于 2024-8-18 21:15
实事求是

你还说你三四百岁呢，也是实事求是？{:4_173:}

马黑黑 发表于 2024-8-18 23:17

红影 发表于 2024-8-18 22:19
你还说你三四百岁呢，也是实事求是？

{:4_181:}

查看完整版本: 激越东川