1001

马黑黑

马黑黑

帖子代码

<style>
#mydiv {
	margin: 130px 0 30px calc(50% - 593px);
	width: 1024px;
	height: 576px;
	background: url('https://638183.freep.cn/638183/t24/3/1001.jpg') no-repeat center/cover;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	position: relative;
}
#player {
	position: absolute;
	right: 60px;
	bottom: 10px;
	-webkit-mask: url('https://638183.freep.cn/638183/web/svg/6star.svg') no-repeat center/150% 150%;
	cursor: pointer;
}
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=401382534" autoplay loop></audio>
	<img id="player" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/t24/3/alan4.jpg" />
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
	player.style.WebkitMask = `url(${aud.paused ? 'https://638183.freep.cn/638183/web/svg/6star_1.svg' : 'https://638183.freep.cn/638183/web/svg/6star.svg'}) no-repeat center/150% 150%`;
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

愤怒的葡萄

进来欣赏一下。

马黑黑

本帖：

使用图片做音频播放控制器。图片使用遮罩（mask）属性对图片进行剪切（代码在第14行）。由于mask属性的兼容性问题，使用了前缀 -webkit-，这样较低版本的 Chromium 亦能支持，Firefox支持该属性。

mask属性先使用一张能自己旋转的 .svg 图片（.gif 或 .webp 也可以）做遮罩，然后，根据音频的播放/暂停状态，动态更换旋转和不旋转的图片。切换有点生硬，这是因为transition属性并不支持mask相关变化。

mask要点：

（一）兼容性略差，目前，基于Chromium内核的浏览器，105版本以上完美支持，可以不要前缀 -webk-，实际使用时还是建议使用前缀。mask附加属性、参数繁多，但各浏览器目前尚未统一标准，所以建议像平时做帖使用背景图片一样使用mask属性以保证属性设置在浏览器中能正常渲染；

（二）mask 遮罩，用于遮罩的图片（图像），该图透明的部分用于遮挡源，不透明的部分用于显示源。举例来说，一个五角星五角星组件的实体部分是非透明的，组件之外是透明的，那么，用这样的图案遮罩源，源呈现出来的就是五角星的形状。

mask只关切遮罩体的透明与不透明，不在乎不透明的部分使用了什么颜色。

（三）如前已述，mask 属性和 background 属性的设置极其相似，学起来难度不会很大。本帖，遮罩体设置为不重复，位置设为 center，尺寸设为 150% 150%（这个要xy方向一同设置）。

海笑

欣赏老师佳作！

马黑黑

海笑 发表于 2024-7-21 08:10
欣赏老师佳作！

早上好

马黑黑

愤怒的葡萄 发表于 2024-7-21 08:00
进来欣赏一下。

早啊

愤怒的葡萄

马黑黑 发表于 2024-7-21 08:21
早啊

不早了，葡萄早上五点钟就起床了，出去散一下步，锻炼一下，回家再洗个澡，主要葡萄的肚子实在是太大了。

南无月

这个背景太帅了。。
螺旋的空间强有纵深之感。。
遮罩形状在前，人物在后，也有很强的层次感
音乐好听，数字标题也很特别，一眼记住~~

南无月

动图可以存成SVG格式。真是太神了。。
暂停切成静态图，播放切成动态图，查了下之前的《信仰》曾经出现过，很惊艳。。

南无月

马黑黑 发表于 2024-7-21 08:03
本帖：

使用图片做音频播放控制器。图片使用遮罩（mask）属性对图片进行剪切（代码在第14行）。由于mask ...

遮罩体设置为不重复，一般都是不重复的吧。。如果设为重复是什么样子。。。

150可改变遮罩形状大小。。14和26行要同时设置

火狐可完美显示

起个网名好难

很巧妙！

css里用-webkit-mask，但在js里又没了-webkit-， 不知在低版本浏览器里的表现会如何。

马黑黑

起个网名好难 发表于 2024-7-21 08:50
很巧妙！

css里用-webkit-mask，但在js里又没了-webkit-， 不知在低版本浏览器里的表现会如何。

低内核版本的只认CSS里的初始设置

马黑黑

南无月 发表于 2024-7-21 08:48
遮罩体设置为不重复，一般都是不重复的吧。。如果设为重复是什么样子。。。

150可改变遮罩形状大小。 ...

设置为重复就是拿掉 no-repeat 就行了，它会根据尺寸设置规则呈现。

马黑黑

南无月 发表于 2024-7-21 08:45
动图可以存成SVG格式。真是太神了。。
暂停切成静态图，播放切成动态图，查了下之前的《信仰》曾经出现过 ...

这不是动图存为，而是svg可以制作动图

马黑黑

愤怒的葡萄 发表于 2024-7-21 08:25
不早了，葡萄早上五点钟就起床了，出去散一下步，锻炼一下，回家再洗个澡，主要葡萄的肚子实在是太大了。

大肚能容

梦江南

背景用螺旋的图图有一种威摄力！赞！

马黑黑

南无月 发表于 2024-7-21 08:43
这个背景太帅了。。
螺旋的空间强有纵深之感。。
遮罩形状在前，人物在后，也有很强的层次感

起个网名好难

马黑黑 发表于 2024-7-21 09:03
低内核版本的只认CSS里的初始设置

js 里的mask有效还是无效 ？ 写作 webkitMak 会不会兼容得好些？

马黑黑

起个网名好难 发表于 2024-7-21 09:08
js 里的mask有效还是无效 ？ 写作 webkitMak 会不会兼容得好些？

是的。已经改了。WebkitMast，两个大写字母