你的直觉
<style>#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 800px; background: url('https://638183.freep.cn/638183/t23/webp1/yrjk.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa::before, #papa::after { position: absolute; content: ''; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.6); animation: fade 1s infinite alternate var(--state); }
#papa::before { left: 400px; top: 290px; }
#papa::after { width: 60px; height: 90px; left: 965px; top: 235px; }
@keyframes fade { from { opacity: 1; } to { opacity: .2; } }
</style>
<div id="papa"><span id="myclone"></span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1938216392" autoplay loop></audio>
<style>
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.zhushi { color: green; }
</style>
本帖最后由 马黑黑 于 2023-8-13 11:56 编辑 <br /><br /><style>
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.zhushi { color: green; }
</style>
<pre id="codePre">
配置代码：
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/charger_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ ];
window.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
top: 20px;
color: #999;
--bg: linear-gradient(rgba(250,250,250,.25),rgba(250,250,250,.65));
`,
player_css: `
bottom: 30px;
--track: transparent;
--prog: rgb(10,250,200,.75);
--ww: 300px;
--hh: 26px;
`,
fs_css: `left: -100px;`,
});
};
})();
</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-13 12:02 编辑
有时，全屏浏览会破坏帖子的整体布局，或帖子的背景图片品质偏低不适合全屏观赏，若此，可以将插件的全屏交互按钮屏蔽：
步骤一：确保帖子主元素设置了 overflow 属性——
overflow: hidden;
步骤二：插件配置代码中，将全屏按钮移动到左边 -100px 或更多——
fs_css: `left: -100px;`, 醉美水芙蓉 发表于 2023-8-13 13:01
老师这个没有见过，是音响吗？
是新能源设备，机器人之类的 这个好玩，很有科技感啊{:4_199:} 这个是那个电池播放器的玩法，用在这里真漂亮{:4_187:} 这两个机器上光圈也好玩，旁边的那个还在想怎么看着很像偏折过去的样子，原来只要给它不同的长宽值就变椭圆了，而椭圆就很像偏折了呢。黑黑厉害，这效果一级棒{:4_199:} 红影 发表于 2023-8-13 14:34
这两个机器上光圈也好玩，旁边的那个还在想怎么看着很像偏折过去的样子，原来只要给它不同的长宽值就变椭圆 ...
这只是雕虫小技 红影 发表于 2023-8-13 14:31
这个好玩，很有科技感啊
嗯，还不错 红影 发表于 2023-8-13 14:31
这个是那个电池播放器的玩法，用在这里真漂亮
还不太差 马黑黑 发表于 2023-8-13 12:00
有时，全屏浏览会破坏帖子的整体布局，或帖子的背景图片品质偏低不适合全屏观赏，若此，可以将插件的全屏交 ...
这两个步骤太实用了。。。大爱！今天做了一个小贴，就两个都用上了。。
{:4_170:}
我原来是想说能不能把全屏按纽底色设成透明，这样放什么贴子都可以搭上。。。
花飞飞 发表于 2023-8-13 19:27
这两个步骤太实用了。。。大爱！今天做了一个小贴，就两个都用上了。。
我原来是想说能不能 ...
透明不行，鼠标移动到它的位置依然有效。display属性设置也不行，会插件的一个设置覆盖。 这两个机器人占了两个车位在充电。。。 花飞飞 发表于 2023-8-13 19:29
这两个机器人占了两个车位在充电。。。
理解正确，冰雪聪明 马黑黑 发表于 2023-8-13 19:29
透明不行，鼠标移动到它的位置依然有效。display属性设置也不行，会插件的一个设置覆盖。
跟鼠标没关系的。。
颜色现在都 是蓝底，如果贴子是绿色，就有点不太搭，改成透明底就百搭了。。 花飞飞 发表于 2023-8-13 19:33
跟鼠标没关系的。。
颜色现在都 是蓝底，如果贴子是绿色，就有点不太搭，改成透明底就百搭了。。
那也不必改成透明吧？颜色总有能搭配的。 马黑黑 发表于 2023-8-13 19:30
理解正确，冰雪聪明
{:4_170:}充完电就可以去扫地了。。 花飞飞 发表于 2023-8-13 19:34
充完电就可以去扫地了。。
智能扫地机不贵，就大一千 马黑黑 发表于 2023-8-13 19:34
那也不必改成透明吧？颜色总有能搭配的。
这个必须你说了算。。。听你的。。{:4_170:}