燃烧
<style>@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
#tz { --bottom: 100%; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/5/green.jpg') no-repeat center/cover; overflow: hidden; }
#tz:hover { --bottom: 10px; }
@media screen and (max-width: 1025px) { #tz { transform: scale(.9); } }
#mplayer { width: 40%; bottom: var(--bottom); background: none; box-shadow: none; color: snow; }
#mplayer img { filter: invert(.8); }
#fsbtn { bottom: var(--bottom); left: 20px; border-color: snow; color: snow; }
video:nth-of-type(2) { opacity: 0.5; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=447896"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/08/49/23/video63631013399ed.mp4" autoplay loop muted></video>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/09/13/12/05/52/video66e3ba20be292.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
hcplay(tz);
</script> <div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
#tz { --bottom: 100%; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/5/green.jpg') no-repeat center/cover; overflow: hidden; }
#tz:hover { --bottom: 10px; }
@media screen and (max-width: 1025px) { #tz { transform: scale(.9); } }
#mplayer { width: 40%; bottom: var(--bottom); background: none; box-shadow: none; color: snow; }
#mplayer img { filter: invert(.8); }
#fsbtn { bottom: var(--bottom); left: 20px; border-color: snow; color: snow; }
video:nth-of-type(2) { opacity: 0.5; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=447896"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/08/49/23/video63631013399ed.mp4" autoplay loop muted></video>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/09/13/12/05/52/video66e3ba20be292.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
hcplay(tz);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>
本帖最后由 马黑黑 于 2025-3-7 20:22 编辑
本帖：
一、使用CSS的媒体查询功能检测用户显示设备的物理分辨率，若其不达到指定的最大宽度：
@media screen and (max-width: 1025px) { /* 这里设置属性行为 */ }
则执行相关操作：
@media screen and (max-width: 1025px) {
#tz {
transform: scale(.9); /* 按 90% 缩小帖子父元素 */
}
}
@media 关键字是CSS3的媒体查询，screen 指荧屏（包含浏览器视口可见区域、不论其是最大化还行向下还原）；max-width 是一个CSS属性，这里指 screen 的最大宽度边界；花括号 {} 里的内容就是设置谁怎样怎样，这里设置 #ts 选择器（对标 id="tz" 的 HTML元素），让它按 0.9 的比例缩放，具体是多少视预设宽度而定，假如帖子的宽度很大，可能需要更小的比例，以便令小显示设备能够有更好的浏览体验，无需拖动滚动条。
媒体查询设定的条件下设定的指向HTML元素的行为，可以是其它的任何属性，只要是需要的都可以合理安排，例如，我们可以不用缩放方式，而是设计具体的宽高，例如我网站里的同名帖子：http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1741343365
ps：相同功能也可以用JS实现，例如我们之前的一个演示。
二、模块 mp3player_lrc_v1.js 虽然预设了很多东西，我们仍然可以对之进行相关操作，本帖仅通过CSS设置，就能达成相应鼠标指针移入移出时的炫酷的效果，按钮自上而下的动画全由CSS实现（--bottom变量、hover伪选择器）。
这个全屏好帅！~~
看到用上了@media screen and (max-width: 1025px) { #tz { transform: scale(.9); } }
如果宽度达到1025，则缩小到原来的90%
这个缩放手机里看比较明显 这个小播和按纽像跟人捉迷藏一样啊。。{:4_173:}
触碰贴子，它就一下子落下来，刚看到呢，又隐身了。。。
如果鼠标移开呢，它溜到贴子上面去藏着了。。。。 青山绿水的背景，整了场燃烧{:4_173:}这创意也太独特了。。
飞鸟是另一个视频。。烧一下都从树林里飞出来了。
居然从这个贴子里看出了故事感。。 这是哪的大火啊，烧得鸟儿都逃走了。
这个是使用两个视频的帖子，两个视频都用得很恰当。{:4_187:} 鼠标触碰就能让隐藏的内容出现，并移动到底部了。这个不仅仅是出现，还能移位的好玩{:4_187:} 看到黑黑留楼了，等着看解说内容{:4_187:} 红影 发表于 2025-3-7 19:40
看到黑黑留楼了，等着看解说内容
也没啥说明的，肚子饿了找饭吃去的 花飞飞 发表于 2025-3-7 19:16
青山绿水的背景，整了场燃烧这创意也太独特了。。
飞鸟是另一个视频。。烧一下都从树林里飞出来 ...
对的{:4_170:} 红影 发表于 2025-3-7 19:39
鼠标触碰就能让隐藏的内容出现，并移动到底部了。这个不仅仅是出现，还能移位的好玩
花里胡哨的也不肿么好{:4_170:} 红影 发表于 2025-3-7 19:37
这是哪的大火啊，烧得鸟儿都逃走了。
这个是使用两个视频的帖子，两个视频都用得很恰当。
谢谢 花飞飞 发表于 2025-3-7 19:13
这个小播和按纽像跟人捉迷藏一样啊。。
触碰贴子，它就一下子落下来，刚看到呢，又隐身了。。。
...
可以固定的 花飞飞 发表于 2025-3-7 19:08
这个全屏好帅！~~
看到用上了@media screen and (max-width: 1025px) { #tz { transform: scale(.9); } }
...
本身就是为低物理分辨率做的适配，PC端一般不受影响（除非是小显示分辨率） 感谢老师的用心，这是手机党的福气哈{:4_204:}{:4_190:} 这音乐 这画面，相当震撼哈~~{:4_178:} 朵拉 发表于 2025-3-7 19:57
感谢老师的用心，这是手机党的福气哈
{:4_191:} 朵拉 发表于 2025-3-7 19:59
这音乐 这画面，相当震撼哈~~
{:4_190:} 有新意，谢谢马老师精彩分享{:4_191:}