茉莉花（测试小设备显示效果）

马黑黑 · 发表于 2025-3-5 12:03

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

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

x

马黑黑 · 发表于 2025-3-5 12:03

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