太极

马黑黑 · 发表于 2024-8-7 07:54

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

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

x

马黑黑 · 发表于 2024-8-7 07:55

帖子代码

<style>
#mydiv {
	margin: 130px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 720px;
	background:
		url('https://638183.freep.cn/638183/small/sunbirds.jpg') no-repeat 990px 80px,
		url('https://638183.freep.cn/638183/t24/webp/tdji_2.webp') no-repeat,
		url('https://638183.freep.cn/638183/t24/4/tdji_1.jpeg') no-repeat 0/cover,
		rgba(0,128,128,.25);
	background-blend-mode: darken, normal, darken;
	box-shadow: 0 0 8px rgba(0,0,0,.5);
	z-index: 1;
	pointer-events: none;
	position: relative;
}
#mydiv::before, #mydiv::after {
	content: '';
	position: absolute;
	background: url('https://638183.freep.cn/638183/small/tdji.jpg') no-repeat center/cover;
	filter: drop-shadow(0 0 20px snow);
	border-radius: 50%;
	animation: rot 10s linear infinite var(--state);
	transition: .75s;
	cursor: pointer;
	pointer-events: auto;
}
#mydiv::before {
	width: 300px;
	height: 300px;
	right: 60px;
	top: 60px;
	mix-blend-mode: multiply;
}
#mydiv::after {
	width: 120px;
	height: 120px;
	left: 20px;
	top: 20px;
}
#mydiv:hover::before, #mydiv:hover::after {
	filter: drop-shadow(0 0 80px teal);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35437599" autoplay loop></audio>
</div>

<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 · 发表于 2024-8-7 08:10

本帖：演示多重背景的应用 + 伪元素做播放器

帖子容器选择器 #mydiv 使用了三个背景图像：外国姑凉，太极剑名家表演，太阳仙鹤，外加一个 rgba 颜色用于提升颜色融合的表现力。

背景图像有叠加现象时，代码中最先出现的背景图像设置处于最上层，后出现的在其下，存在色彩覆盖情况。因此，处理方法之一是背景图像融合，本帖采用此法。

background-blend-mode 属性支持设置多个图像的融合滤镜，各滤镜对应代码中按顺序出现的背景图像，滤镜值之间有小角逗号隔开。滤镜有一个补全规则：滤镜数少于背景图像数时，从头循环滤镜。举例说明：多背景图像只设置一个滤镜，则所有的图像使用相同的滤镜；若有甲乙丙丁四个图像背景但只有三个滤镜值ABC，那么，甲乙丙使用ABC滤镜，丁使用A滤镜。

帖子容器的两个伪元素做小播使用已经不止一次，因最近的小白音画帖讲义介绍到了伪元素，所以顺势做一个演示。这个需要帖子容器选择器和其伪元素选择器的一些配套：pointer-events（设备指针事件）属性设置为 none，这样帖子容器不接受点击操作；伪元素 pointer-events 属性设置为 auto，这样，伪元素接受设备指针点击交互。