论坛 › 【与图有染】 › 【云裳音画】粉红色的弦

欢颜（云裳） 发表于 2025-4-6 19:06

【云裳音画】粉红色的弦

<style>#mydiv { margin: 0 0 0 calc(50% - 980px); display: grid; place-items: center; width: 1800px; height: 1000px;top:60px; background: lightblue url('https://bohann.net/data/attachment/forum/202504/06/181710m8781ljcibh7ceee.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.green { color: green; }
#vid {
        position: absolute;
        width: 100%;
        height: 110%;
        top:-80px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 5;
        opacity: .49;
}</style><div id="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.mp4" autoplay="" loop="" muted=""> <audio style="width:220px; height:60px;" controls="controls" autoplay="autoplay" loop="loop" src="https://user.wyc520.net/filestores/2023/12/30//2931a3708832b888f29adb26f036c386.mp3" type="audio/mpeg"></audio></td></tr></table>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></video></div><br><br><br><br><br><br><br><br><br>

爆汁莓驴 发表于 2025-4-6 19:23

你的音乐播放器不知能否透明，没有隐藏被图盖住了:lol。

<script>
mydiv.onclick= function() {if(document.querySelector('audio').paused){document.querySelector('audio').play()}else{document.querySelector('audio').pause()};mydiv.title="点击控制播放"};
</script>

爆汁莓驴 发表于 2025-4-6 19:33

按理应该显示。试了一下，问题是音频要放在视频标签的下方，不是插在视频标签之间。
为了美观可以这样不显示，其他办法也可控制播放。（已控）

欢颜（云裳） 发表于 2025-4-6 21:13

爆汁莓驴 发表于 2025-4-6 19:23
你的音乐播放器不知能否透明，没有隐藏被图盖住了。




就是要盖住呀，只看图就行，音画只看图，不看播放器

爆汁莓驴 发表于 2025-4-6 22:14

旋转90度，在手机通过两指缩放，能更好展示图片。在电脑没意义
<img id="dt" src="https://bohann.net/data/attachment/forum/202504/06/181710m8781ljcibh7ceee.jpg" style="width:100%;">




<script>
window.onload = function() {
    var current = 0;
    document.getElementById('dt').onclick = function() {
      current = (current + 90) % 360;
      this.style.transform = 'rotate(' + current + 'deg) scale(2)';
    }
};

   </script>
手机网页（触屏版）有限制，在默认缩放范围内，可以展示最大90度的图片。如果硬性设置放大，旋转90度后恢复到默认最大。<br>

transform的旋转和放大合并写代码可以放大:lol 刷新复位
就是放大后少女的脸有点吓人！;P

我也在 发表于 2025-4-6 23:01

这次的帖子页面和以往你发帖的页面不一样呢。

欢颜（云裳） 发表于 2025-4-7 20:15

我也在 发表于 2025-4-6 23:01
这次的帖子页面和以往你发帖的页面不一样呢。
是吗？呵呵，可能是代码的问题

么念 发表于 2025-4-8 09:48

标题码字弱了点，整图效果不错

欢颜（云裳） 发表于 2025-4-8 20:11

么念 发表于 2025-4-8 09:48
标题码字弱了点，整图效果不错

谢谢欣赏和点评，问好

查看完整版本: 【云裳音画】粉红色的弦