论坛 › 欢乐水吧 › 异族之舞

马黑黑 发表于 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.onclick = () => aud.paused ? aud.play() : aud.pause();
        tzbox.oncontextmenu = (e) => e.preventDefault();
})();
</script>

马黑黑 发表于 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.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 这个尺寸之内。

南无月 发表于 2024-6-1 12:54

马黑黑 发表于 2024-6-1 10:27
#tzbox 选择器的 box-sizing: border-box; 用于令帖子宽度可控：因为使用了 border 属性，边框的尺寸会影响 ...

试了下，把边框变成border: 80px inset cyan;视频自动变小全部显示边框之内。
不过宽度数据不应是1280么。。

南无月 发表于 2024-6-1 12:55

背景跳动，视频也在动。。活力十足的贴子~~{:4_199:}

马黑黑 发表于 2024-6-1 13:49

南无月 发表于 2024-6-1 12:55
背景跳动，视频也在动。。活力十足的贴子~~

{:4_190:}

马黑黑 发表于 2024-6-1 13:50

南无月 发表于 2024-6-1 12:54
试了下，把边框变成border: 80px inset cyan;视频自动变小全部显示边框之内。
不过宽度数据不应是1280么 ...

1280 因为 box-sizing: border-box; 而将一切包含在内

红影 发表于 2024-6-1 15:01

这个有趣，让静态图有了动感。很活力四射的效果{:4_199:}

红影 发表于 2024-6-1 15:03

@keyframes shake { to { inset: -20px; } }
这个用法还没见过的呢{:4_173:}

南无月 发表于 2024-6-1 16:30

马黑黑 发表于 2024-6-1 13:49


{:4_180:}

南无月 发表于 2024-6-1 16:31

马黑黑 发表于 2024-6-1 13:50
1280 因为 box-sizing: border-box; 而将一切包含在内

{:4_199:}更大尺寸也全显，这个效果好

马黑黑 发表于 2024-6-1 18:11

南无月 发表于 2024-6-1 16:31
更大尺寸也全显，这个效果好

需要精细计算时，需要考虑 border、padding 等占位属性

马黑黑 发表于 2024-6-1 18:11

南无月 发表于 2024-6-1 16:30


谢茶

马黑黑 发表于 2024-6-1 18:26

红影 发表于 2024-6-1 15:03
@keyframes shake { to { inset: -20px; } }
这个用法还没见过的呢

inset属性用于设定元素基于其父元素的上、右、下、左位置尺寸设定，inset: -20px; 表示，子元素的边缘离父元素对应的边缘都是 -20px 的距离，这意味着它比父元素的宽高都大 20*2 的尺寸。

樵歌 发表于 2024-6-1 19:23

非我族类，跳舞也异。{:4_189:}

马黑黑 发表于 2024-6-1 21:03

樵歌 发表于 2024-6-1 19:23
非我族类，跳舞也异。

{:4_172:}

绿叶清舟 发表于 2024-6-1 21:31

十足的动感，代码简单最好了{:4_189:}

马黑黑 发表于 2024-6-1 22:30

绿叶清舟 发表于 2024-6-1 21:31
十足的动感，代码简单最好了

这看要实现什么。有时候一个效果的实现会非常复杂，有时候又会非常简单

红影 发表于 2024-6-1 22:40

马黑黑 发表于 2024-6-1 18:26
inset属性用于设定元素基于其父元素的上、右、下、左位置尺寸设定，inset: -20px; 表示，子元素的边缘离 ...

这些元素可以用来做动态呢，没想到{:4_187:}

马黑黑 发表于 2024-6-1 23:33

红影 发表于 2024-6-1 22:40
这些元素可以用来做动态呢，没想到

它和 wdth、height、top、left 的联合效果是一样的

查看完整版本: 异族之舞