山歌寥哉·序曲
<style>#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: url('https://638183.freep.cn/638183/t23/webp1/uglz.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa::before, #papa::after { position: absolute; content: ''; width: 10px; height: 100px; top: 5px; -webkit-box-reflect: below 480px linear-gradient(to bottom, transparent, rgba(255,255,255,.5)); animation: change 10s infinite alternate var(--state); }
#papa::before { left: 5px; background: repeating-linear-gradient(to right,rgba(255,255,255,.4),rgba(255,255,255,.4) 5px,transparent 5px,transparent 10px); }
#papa::after { right: 5px; background: repeating-linear-gradient(to left,rgba(255,255,255,.4),rgba(255,255,255,.4) 5px,transparent 5px,transparent 10px); }
@keyframes change { to { width: 400px; } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063486972" autoplay loop></audio>
本帖最后由 马黑黑 于 2023-8-6 09:00 编辑 <br /><br /><style>
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.zhushi { color: green; }
</style>
<p>配置代码：</p>
<pre id="codePre">
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/huakuai_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
,
,
,
,
];
window.onload = () => {
HCPlayer({
papa: '#papa', <span class="zhushi">/* 宿主元素 */</span>
lrcAr: geci, <span class="zhushi">/* 歌词 */</span>
lrc_css: `
top: 20px; <span class="zhushi">/* 位置 */</span>
color: lightblue; <span class="zhushi">/* 歌词底色 */</span>
-webkit-box-reflect: below 540px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
--bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));<span class="zhushi">/* 歌词同步颜色 */</span>
`,
player_css: `
top: 100px; <span class="zhushi">/* 位置 */</span>
color: #fff; <span class="zhushi">/* 文本颜色 */</span>
-webkit-box-reflect: below 400px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
--track: lightblue; <span class="zhushi">/* 底轨颜色 */</span>
--prog: snow; <span class="zhushi">/* 进度颜色 */</span>
--ww: 300px; <span class="zhushi">/* 示波宽度 */</span>
--slider: orange;
`,
});
}
})();
</script>
</pre>
<script>
let runCodes = (str) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str = str.match(reg);
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
let func = new Function(js_str);
func();
};
runCodes(codePre.innerText);
</script>
渐变代码整出幕布效果~~很是新奇。。。。
场面震撼，有强烈的视觉冲击力。。 超级漂亮！。。 花飞飞 发表于 2023-8-6 09:24
渐变代码整出幕布效果~~很是新奇。。。。
场面震撼，有强烈的视觉冲击力。。
这个不算啥。
如果需要推出的效果，则，把两个伪元素的 to right / left 对换一下 花飞飞 发表于 2023-8-6 09:26
超级漂亮！。。
倒影只有在基于 Chromium 的浏览器中见到 很奇妙的效果，四周有推进的条纹，当中有歌词和播放器的倒影。非常奇妙的帖子{:4_171:} 又是最新的打包上传的播放器，非常漂亮。给黑黑点赞{:4_199:} 那个渐变条纹也是倒影呢，构思很奇特{:4_199:} 马黑黑 发表于 2023-8-6 09:41
这个不算啥。
如果需要推出的效果，则，把两个伪元素的 to right / left 对换一下
{:4_170:}小白试试去。。。 马黑黑 发表于 2023-8-6 09:42
倒影只有在基于 Chromium 的浏览器中见到
百分可以看到，火狐果然看不到。。。
花飞飞 发表于 2023-8-6 11:23
百分可以看到，火狐果然看不到。。。
百分基于Chromium 花飞飞 发表于 2023-8-6 11:23
百分可以看到，火狐果然看不到。。。
火狐是自己的内核 红影 发表于 2023-8-6 11:11
又是最新的打包上传的播放器，非常漂亮。给黑黑点赞
这个是之前做过的、也集合过的小滑块播放器，做了些修改 红影 发表于 2023-8-6 11:13
那个渐变条纹也是倒影呢，构思很奇特
Chromium内核的浏览器都能看到，火狐就看不到了 醉美水芙蓉 发表于 2023-8-6 11:56
这个播放器超级好看！
感谢欣赏。中午好！ 马黑黑 发表于 2023-8-6 11:49
火狐是自己的内核
好的，我刚才发现为什么要两个浏览器切着用，因为百分我没有办法设定它自动播放，火狐可以。。 马黑黑 发表于 2023-8-6 09:41
这个不算啥。
如果需要推出的效果，则，把两个伪元素的 to right / left 对换一下
我试了一下，中间推两边需要设起始位置。。 马黑黑 发表于 2023-8-6 11:50
这个是之前做过的、也集合过的小滑块播放器，做了些修改
嗯嗯，很漂亮{:4_187:}