梦的地方

马黑黑 · 发表于 2024-7-12 07:42

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

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

x

马黑黑 · 发表于 2024-7-12 07:42

帖子代码

<style>
#mydiv {
--width: 1280px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 700px;
background: radial-gradient(circle, transparent, silver, lightgreen, cyan);
box-shadow: 3px 3px 6px #333;
pointer-events: none;
overflow: hidden;
position: relative;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
inset: 0;
background: rgba(0, 100, 100, .15);
}
#mydiv::after {
width: 100px;
height: 100px;
top: 40px;
left: calc(50% - 50px);
background: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') no-repeat center/cover;
filter: drop-shadow(0 0 26px lightblue);
pointer-events: auto;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
#vid {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% + 70px);
object-fit: cover;
mix-blend-mode: color-burn;
opacity: .75;
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div id="mydiv" title="播放/暂停">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2103389092" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/41/56/6332b7166860f.mp4" muted loop autoplay disablePictureInPicture></video>
</div>
<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
aud.paused ? vid.pause() : vid.play();
mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
mydiv.title = ['暂停','播放'][+aud.paused];
}
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

复制代码

马黑黑 · 发表于 2024-7-12 07:57

本帖最后由马黑黑于 2024-7-12 08:01 编辑

本帖：

（一）使用帖子主元素渐变背景 + ::before伪元素纯色背景构建一个简单的背景图案，其结果将作用于视频，视频播放时能产生奇妙的效果。不同的配色、色彩的位置以及对应数据的透明度设置，将可能产生不一样的效果；

（二）视频需要设置 mix-blend-mode 属性为一个合适的值，这样步骤一的设置才能和视频移到产生融合作用。

（三）小播使用 ::after 伪元素做成，放个小背景图片。帖子主元素 pointer-events 属性设置 none，表示它不接受设备指针点击操作，该属性有继承性，设置了不可点击的容器其下的所有子元素也将不能接受点击操作，因此，::after 伪元素又将 pointer-events 属性设置为 auto（自动），以便让小播的音频控制功能有效。

（四）JS部分极其简单：audio音频控件三个事件合在一处写，事件发生时执行的内容是视频的暂停或播放、CSS关键帧动画的暂停与继续、按钮的提示语变更。这三个事件分别是：

canplay : 音频可以播放
playing : 正在开始播放
pause : 暂停中

逻辑上，这三个事件如果被触发，它们要做的事情都是一样的，就是，判断audio音频控件是否暂停中，若是，酱紫做，若不是，囊子做。