1001
本帖最后由 马黑黑 于 2024-7-21 09:07 编辑 <br /><br /><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);
z-index: 1;
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> 本帖最后由 马黑黑 于 2024-7-21 09:08 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<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>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</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
不早了，葡萄早上五点钟就起床了，出去散一下步，锻炼一下，回家再洗个澡，主要葡萄的肚子实在是太大了。
大肚能容 背景用螺旋的图图有一种威摄力！赞！{:4_187:} 南无月 发表于 2024-7-21 08:43
这个背景太帅了。。
螺旋的空间强有纵深之感。。
遮罩形状在前，人物在后，也有很强的层次感
{:4_180:} 马黑黑 发表于 2024-7-21 09:03
低内核版本的只认CSS里的初始设置
js 里的mask有效还是无效 ？ 写作 webkitMak 会不会兼容得好些？ 起个网名好难 发表于 2024-7-21 09:08
js 里的mask有效还是无效 ？ 写作 webkitMak 会不会兼容得好些？
是的。已经改了。WebkitMast，两个大写字母