燃烧

马黑黑 · 发表于 2025-3-7 18:15

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-3-7 18:15

<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>

马黑黑 · 发表于 2025-3-7 18:15

本帖最后由马黑黑于 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/bsho ... rt=mahei_1741343365

ps：相同功能也可以用JS实现，例如我们之前的一个演示。

二、模块 mp3player_lrc_v1.js 虽然预设了很多东西，我们仍然可以对之进行相关操作，本帖仅通过CSS设置，就能达成相应鼠标指针移入移出时的炫酷的效果，按钮自上而下的动画全由CSS实现（--bottom变量、hover伪选择器）。