异族之舞

马黑黑 · 发表于 2024-6-1 10:09

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

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

x

马黑黑 · 发表于 2024-6-1 10:09

帖子代码（好简单的）：

<style>
#tzbox { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 760px; border: thick groove cyan; overflow: hidden; box-sizing: border-box; position: relative; }
#tzbox::before { position: absolute; content: ''; inset: 0; background: url('https://638183.freep.cn/638183/t24/2/yzzw.jpg') no-repeat center/cover; animation: shake .2s infinite alternate var(--state); }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: color-dodge; }
.vid:nth-of-type(2) { width: 150px; height: 150px; right: 10px; top: 10px; border-radius: 50% 10%; box-shadow: 0 0 16px cyan; mix-blend-mode: unset; cursor: pointer; transition: .6s; }
.vid:nth-of-type(2):hover { transform: scale(1.1); }
@keyframes shake { to { inset: -20px; } }
</style>
<div id="tzbox">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2150316642" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d2174991e28f.mp4" loop muted disablePictureinPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d2174991e28f.mp4" autoplay loop muted disablePictureinPicture title="播放/暂停"></video>
</div>
<script>
(function() {
const vids = document.querySelectorAll('.vid');
var mState = () => {
tzbox.style.setProperty('--state', ['running','paused'][+aud.paused]);
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
vids[1].onclick = () => aud.paused ? aud.play() : aud.pause();
tzbox.oncontextmenu = (e) => e.preventDefault();
})();
</script>

复制代码

马黑黑 · 发表于 2024-6-1 10:27

#tzbox 选择器的 box-sizing: border-box; 用于令帖子宽度可控：因为使用了 border 属性，边框的尺寸会影响元素的尺寸，默认时帖子容器宽度这样计算：

容器宽度 + 边框厚度 + 其他属性值

这回大于 width: 1028; 的设置。而使用了 box-sizing: border-box; 之后，一切都塞在 1028 这个尺寸之内。