希望

马黑黑 · 发表于 2024-2-23 08:34

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

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

x

本帖最后由马黑黑于 2024-2-23 09:18 编辑

马黑黑 · 发表于 2024-2-23 08:35

本帖最后由马黑黑于 2024-2-23 09:17 编辑

代码

<style>
#papa {
	margin: 0 0 0 calc(50% - 593px);
	width: 1024px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/1/hope.jpeg') no-repeat center/cover;
	box-shadow: 3px 3px 6px gray;
	overflow: hidden;
	display: grid; /* 网格布局 : 配合下句 */
	place-items: center; /* 约束子元素绝对居中 */
	position: relative; /* 相对定位 : 为绝对定位的子元素提供参照 */
}
.vid {
	position: absolute;
	top: -300px;
	width: 100%;
	height: 150%;
	object-fit: cover;
	mix-blend-mode: screen;
}
#player {
	top: 30px;
	filter: drop-shadow(0 0 8px yellow);
	cursor: pointer;
	animation: turn 6s linear infinite var(--state);
	position: absolute;
}
@keyframes turn { to { transform: rotate(1turn); } }
</style>

<div id="papa">
	<!-- html子元素的次序 ：图片播放器要放在视频之后 -->
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29049046" autoplay loop></audio>
	<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/67/72/63db22ade2dc6.mp4" loop muted></video>
	<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/68/71/63e610437126a.mp4" loop muted></video>
	<img id="player" src="https://638183.freep.cn/638183/small/7s.png" alt="" />
</div>

<script>
var vids = document.querySelectorAll('.vid');
var vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());
var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vidplay(false)) : (papa.style.setProperty('--state', 'running'), vidplay(true));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 · 发表于 2024-2-23 08:44

本帖最后由马黑黑于 2024-2-23 08:46 编辑

网格布局可以约束子元素的初始定位，本帖的帖子主元素使用网格布局，再用place-items属性限制子元素上下、左右都居中。

子元素在父元素的网格定位约束下，仍有自己的“活动空间”，使用绝对定位后，可以随心所欲设置 left、top 属性进行定位，可以摆脱父元素的约束。那为什么还有使用网格约束定位呢？看一下 #player 选择器就可以理解了：它只需要设定 top 属性，left不用设置（按约束定位）。

使用网格布局不是一个必须项，实现子元素精准定位会有很多方法。比如，父元素相对定位后，子元素绝对定位，在父元素相对定位+子元素绝对定位的模式下，子元素可以使用 left、top 等属性在父元素方位参照系里进行精准布局。

马黑黑 · 发表于 2024-2-23 08:52

关于视频的混合样式：

.vid 选择器用于规范视频样式，本帖使用两个视频，class="vid" 指向 css 的 .vid 选择器。.vid 的 mix-blend-mode 属性值设为 screen，可以将视频的黑色背景透明化。视频纯黑的背景要纯粹，背景透明才会完全。混合滤镜对视频的作用道理同对图片的作用，均依赖色彩构成而产生各自子滤镜预设的效果，制作或选择背景视频因此大有讲究。