茉莉花（测试小设备显示效果）
<style>#pa {
--state: running;
position: relative;
width: 1280px;
height: 720px;
background: rgba(0,0,0,.9) url('https://638183.freep.cn/638183/t24/5/mlh.jpg') no-repeat center/cover;
border: thick double tan;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,.6);
pointer-events: none;
margin: 30px 0 30px calc(50% - 721px);
}
#pa::after {
position: absolute;
content: url('https://638183.freep.cn/638183/small/mlh.png');
top: 20px;
left: 20px;
cursor: pointer;
pointer-events: auto;
animation: rot 8s linear infinite var(--state);
}
.vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
pointer-events: none;
border-radius: inherit;
}
@keyframes rot {
to { transform: rotate(1turn); }
}
</style>
<div id="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1907551377" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/19/07/video6363f80b6cb6d.mp4" muted autoplay loop></video>
</div>
<script>
var pa = document.querySelector('#pa');
var aud = document.querySelector('audio');
var vid = document.querySelector('.vid');
var ww = pa.offsetWidth, hh = pa.offsetHeight;
var scale = (pa, width) => {
var vw = window.innerWidth || document.documentElement.clientWidth,
vh = window.innerHeight || document.documentElement.clientHeight;
var val = vw < width ? (Math.min(vw/ww, vh/hh)) * 0.95 : 1;
pa.style.setProperty('transform', `scale(${val})`);
};
var mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
pa.onclick = () => aud.paused ? aud.play() : aud.pause();
window.onresize = () => scale(pa, ww);
scale(pa,ww);
</script>
<div id="hEdiv"><pre id="hEpre">
<style>
#pa {
--state: running;
position: relative;
width: 1280px;
height: 720px;
background: rgba(0,0,0,.9) url('https://638183.freep.cn/638183/t24/5/mlh.jpg') no-repeat center/cover;
border: thick double tan;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,.6);
pointer-events: none;
margin: 30px 0 30px calc(50% - 721px);
}
#pa::after {
position: absolute;
content: url('https://638183.freep.cn/638183/small/mlh.png');
top: 20px;
left: 20px;
cursor: pointer;
pointer-events: auto;
animation: rot 8s linear infinite var(--state);
}
.vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
pointer-events: none;
border-radius: inherit;
}
@keyframes rot {
to { transform: rotate(1turn); }
}
</style>
<div id="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1907551377" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/19/07/video6363f80b6cb6d.mp4" muted autoplay loop></video>
</div>
<script>
var pa = document.querySelector('#pa');
var aud = document.querySelector('audio');
var vid = document.querySelector('.vid');
var ww = pa.offsetWidth, hh = pa.offsetHeight;
var scale = (pa, width) => {
var vw = window.innerWidth || document.documentElement.clientWidth,
vh = window.innerHeight || document.documentElement.clientHeight;
var val = vw < width ? (Math.min(vw/ww, vh/hh)) * 0.95 : 1;
pa.style.setProperty('transform', `scale(${val})`);
};
var mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
pa.onclick = () => aud.paused ? aud.play() : aud.pause();
window.onresize = () => scale(pa, ww);
scale(pa,ww);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>
这是适配小型显示设备方案之一的测试，具体实现代码是scale函数，它需要外部两个变量 ww 和 hh 做运算。本方案，以手机为例，横放、竖看伸缩效果都完好。
另一个方案只适合手机横看，链接：茉莉花 这个能自动调整大小，真好{:4_187:} 这么多茉莉花，感觉香气扑鼻啊{:4_187:} 代码，我不懂，但这《茉莉花》的乐曲如翠鸟弹水太美了。 马黑黑 发表于 2025-3-5 12:06
这是适配小型显示设备方案之一的测试，具体实现代码是scale函数，它需要外部两个变量 ww 和 hh 做运算。本 ...
手机用户测试 完美{:4_204:} 这一大丛的茉莉花 又香又美，欣赏学习了{:4_204:} 好美的茉莉花，学习了。 梦江南 发表于 2025-3-5 15:18
好美的茉莉花，学习了。
{:4_190:} 朵拉 发表于 2025-3-5 14:19
手机用户测试 完美
{:4_191:} 朵拉 发表于 2025-3-5 14:20
这一大丛的茉莉花 又香又美，欣赏学习了
{:4_190:} 梦油 发表于 2025-3-5 14:06
代码，我不懂，但这《茉莉花》的乐曲如翠鸟弹水太美了。
下午好 红影 发表于 2025-3-5 13:20
这个能自动调整大小，真好
{:4_190:} 红影 发表于 2025-3-5 13:22
这么多茉莉花，感觉香气扑鼻啊
{:4_191:} 马黑黑 发表于 2025-3-5 12:06
这是适配小型显示设备方案之一的测试，具体实现代码是scale函数，它需要外部两个变量 ww 和 hh 做运算。本 ...
{:4_173:}小设备的福音~~通过函数实现的。
这函数对我来说又美又难懂，叫人牙痒痒。。
原来那版真的只适合横屏 画面清雅，静态和动态的茉莉花都透着清香，这样的搭配赏心悦目。。
小播里又只扣一半，白的和绿的搭起来又是花和叶的主色调，这个留白真漂亮。。{:4_173:} 这个贴子加了两层圆角边框，像是在画框里流动。。
曲子经典，如山间清泉，清澈而纯净，好听。。
花飞飞 发表于 2025-3-5 18:59
这个贴子加了两层圆角边框，像是在画框里流动。。
曲子经典，如山间清泉，清澈而纯净，好听。。
你仔细看CSS background 属性，这个效果因它而起 花飞飞 发表于 2025-3-5 18:55
画面清雅，静态和动态的茉莉花都透着清香，这样的搭配赏心悦目。。
小播里又只扣一半，白的和绿的搭起来又 ...
我这是用AI扣的，我一点点操作都不用