试试黑黑老师的1001 谢谢你
本帖最后由 梦江南 于 2024-7-21 13:27 编辑 <br /><br /><style>#mydiv {
margin: 130px 0 30px calc(50% - 593px);
width: 1024px;
height:750px;
background: url('https://pic.imgdb.cn/item/669c9885d9c307b7e95bad52.gif') 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=2085860137" autoplay loop></audio>
<img id="player" alt="" title="播放/暂停" src="https://pic.imgdb.cn/item/666a6741d9c307b7e9aa2b68.gif" />
</div>
<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
player.style.mask = `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 14:03
欣赏老友佳作！
谢谢老友分享支持，下午好！{:4_204:} 梦江南把这个动图做到帖子里去了啊，有趣。谢谢梦江南{:4_187:} 从这个帖子里能看出，小图的底图最好大于遮罩用的图图，这样这样的颜色就不会出现。
这个小图因为也是透明的，当转动到某个角度时，遮罩的绿边就出现了呢{:4_204:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 在帖子里看到这个转动动图特别开心{:4_173:} 本帖最后由 梦江南 于 2024-7-21 16:08 编辑
红影 发表于 2024-7-21 15:57
梦江南把这个动图做到帖子里去了啊，有趣。谢谢梦江南
我试试能否把动图放进去。{:4_204:} 红影 发表于 2024-7-21 15:59
从这个帖子里能看出，小图的底图最好大于遮罩用的图图，这样这样的颜色就不会出现。
这个小图因为也是透明 ...
绿色是动图的背景色，动图不是透明的。只是高度只有这么点点高。
黑黑老师的遮罩代码能适应动图的高度，这是太神奇了。 起个网名好难 发表于 2024-7-21 16:00
问好老师，谢谢分享支持！{:4_204:} 红影 发表于 2024-7-21 16:00
在帖子里看到这个转动动图特别开心
谢谢你，把这首歌送给您！{:4_187:} 梦江南 发表于 2024-7-21 16:03
我试试能否把动图放进去。
这个尝试特别好，通过看你的帖子，更能明白这个代码在不同背景下的表现了{:4_187:} 红影 发表于 2024-7-21 17:23
这个尝试特别好，通过看你的帖子，更能明白这个代码在不同背景下的表现了
就是这个意思，黑黑老师真的很厉害。 梦江南 发表于 2024-7-21 16:07
绿色是动图的背景色，动图不是透明的。只是高度只有这么点点高。
黑黑老师的遮罩代码能适应动图的高度 ...
知道，绿色是动图的颜色，在底图之上的带颜色的部分都变透明了。
黑黑老师那个底图不是透明图，所以星星落在上面带颜色的地方全变成透明了。
通过你的制作，感觉透明的地方星星的颜色就被保留了。 梦江南 发表于 2024-7-21 16:10
谢谢你，把这首歌送给您！
这首歌特别美好，听着这样的歌曲很感动。也谢谢你，梦江南，因为有你，温暖了四季{:4_187:} 红影 发表于 2024-7-21 17:26
知道，绿色是动图的颜色，在底图之上的带颜色的部分都变透明了。
黑黑老师那个底图不是透明图，所以星星 ...
我的动图是长方形是不是也要设置一下？ 欣赏梦江南的精美制作，黑黑老师的教程我还没有看的，赶快先去看看了，回头再来欣赏 欣赏佳作，问候梦江南。 梦江南制作的非常棒，刚看了黑黑老师的教程，你也是速度的，这么快就完成作业了{:4_199:}
页:
[1]
2