谭盾 - 苍：序曲

马黑黑

马黑黑

帖子代码

<style>
#papa {
	margin: 130px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/e1e.jpg') no-repeat center/cover;
	box-shadow: 0 0 8px rgba(0,0,0,.6);
	pointer-events: none;
	z-index: 1;
	position: relative;
}
#papa::before, #papa::after { position: absolute; content: ''; }
#papa::before {
	width: 900px;
	height: 640px;
	right: 0;
	background: url('https://638183.freep.cn/638183/t24/e2e.jpg') no-repeat center/cover;
	-webkit-mask: linear-gradient(110deg, transparent, red);
}
#papa::after {
	left: 40%;
	bottom: 45%;
	content: url('https://638183.freep.cn/638183/small/hxxb.webp');
	cursor: pointer;
	pointer-events: auto;
	mix-blend-mode: color-burn;
	animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>


<div id="papa" title="播放/暂停">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=154377" autoplay loop></audio>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', ['running','paused'][+aud.paused]);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑

本帖：

（一）主元素背景图片和伪元素 ::before 背景图片右对齐重叠，伪元素通过 mask 遮罩将其背景图片融入主元素背景图片中，此法相当于PS的蒙版手法。

mask 可以使用各种渐变实现，色彩位置、遮罩角度等等可能存在的参数均可细调，可根据需要而定。

（二）小播晶莹剔透的效果实现手法很简单，仅一个融合滤镜，代码在26行。

梦江南

简短的代码做出漂亮的图图，真佩服！

愤怒的葡萄

非常漂亮的音画作品。

海笑

欣赏老师佳作！

南无月

马黑黑 发表于 2024-7-22 12:39
本帖：

（一）主元素背景图片和伪元素 ::before 背景图片右对齐重叠，伪元素通过 mask 遮罩将其背景图片 ...

mask 可以使用各种渐变实现。。
这个又是个新思路，昨天是用SVG图片遮罩，今天变成渐变了，三种渐变都适用，那效果会更自然柔和。
-webkit-mask: url
-webkit-mask: linear-gradient

南无月

马黑黑 发表于 2024-7-22 12:39
本帖：

（一）主元素背景图片和伪元素 ::before 背景图片右对齐重叠，伪元素通过 mask 遮罩将其背景图片 ...

小播看出来是个颜色加深滤镜进行背景融合，红宝石一样透明的材质，质感很强。

南无月

白老师的思路创意每次都令人眼前一亮，豁然开朗。。
此贴效果一流。。
音乐好听，每天都能赏到不同乐曲，实属一大乐事

红影

这个好奇特，用遮罩，伪元素的图片不用设置透明或融合，就能让背景图片显示出来，而且是逐渐过渡显示的，让交接地方毫无痕迹。黑黑伪元素图片特意用的比较小的图图，也是为了说明这点吧

红影

-webkit-mask: linear-gradient(110deg, transparent, red);
这个里面的红色无论是什么颜色都一样吧，因为在使用遮罩时颜色的存在的地方就变透明了

红影

每天都有新东西学习，真的太好了

红影

小播竟然能变成这样的效果，真没想到

辫子哥哥

感觉小女孩坐在水里

马黑黑

辫子哥哥 发表于 2024-7-22 19:55
感觉小女孩坐在水里

凉快

马黑黑

红影 发表于 2024-7-22 19:39
-webkit-mask: linear-gradient(110deg, transparent, red);
这个里面的红色无论是什么颜色都一样吧，因为 ...

mask的原理再强调一下：遮罩体透明的，其下源图像不显示，反之，任意不（全）透明的，其下源图像（部分）显示。

马黑黑

醉美水芙蓉 发表于 2024-7-22 21:20
老师的代码神奇！竟能做出PS图图融合效果！

马黑黑

南无月 发表于 2024-7-22 14:38
白老师的思路创意每次都令人眼前一亮，豁然开朗。。
此贴效果一流。。
音乐好听，每天都能赏到 ...

南无月

马黑黑 发表于 2024-7-22 21:23

已跟了一贴，把线性渐变换成径向渐变，效果一样惊艳