唐

马黑黑

马黑黑

帖子代码

<style>
#mydiv {
	margin: 130px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 720px;
	background: tan url('https://638183.freep.cn/638183/t24/webp/tang.webp') no-repeat center/cover;
	box-shadow: 0 0 6px rgba(0,0,0,.95);
	z-index: 1;
	position: relative;
}
#player {
	position: absolute;
	left: calc(50% - 150px);
	top: -150px;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ygf.jpg') no-repeat center/cover;
	-webkit-mask: url('https://638183.freep.cn/638183/web/svg/flower_3s.svg') no-repeat center/100px 100px;
	transition: .72s;
	cursor: pointer;	
}
#player:hover { -webkit-mask-size: 300px 300px; }
</style>

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

<script>
mState = () => {
	player.style.webkitMaskImage = `url(${aud.paused ? 'https://638183.freep.cn/638183/web/svg/flower_3.svg' : 'https://638183.freep.cn/638183/web/svg/flower_3s.svg'})`;
	player.title = '点击' + ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑

本帖：

播放控制器使用遮罩+遮罩体响应式更换，和之前的1001（音乐已失效）差不多。

起个网名好难

                               
登录/注册后可看大图

南无月

贴子好漂亮，一图一播一乐，简洁又尽显大唐盛世之美

南无月

马黑黑 发表于 2024-8-5 12:05
本帖：

播放控制器使用遮罩+遮罩体响应式更换，和之前的1001（音乐已失效）差不多。

唐朝美人底图300，遮罩100变300，动静图切换~~

我好奇的是，SVG动图的制作。。。

朵拉

欣赏学习老师的佳作，
播放器是唐美人玉环么

梦江南

好繁华！赞哦！

老谟深虑

           好制作，好美！

梦油

盛唐美景、目不暇接。

马黑黑

梦油 发表于 2024-8-5 16:09
盛唐美景、目不暇接。

富丽堂皇

马黑黑

南无月 发表于 2024-8-5 13:08
唐朝美人底图300，遮罩100变300，动静图切换~~

我好奇的是，SVG动图的制作。。。

马黑黑

老谟深虑 发表于 2024-8-5 15:57
好制作，好美！

小辣椒

马黑黑 发表于 2024-8-5 12:02
帖子代码

<style>

黑黑是我浏览器问题吗？看见代码有在界面外面

小辣椒

马黑黑 发表于 2024-8-5 12:02
帖子代码

<style>

回帖后代码都在界面里面了

小辣椒

先上来看看的，黑黑这个播放器太漂亮了

红影

这个有意思，小播下面藏了个宫妆美人儿

红影

小播的点击，可以在动态图和静态图进行切换呢，这个好