蓝宝石 学习黑黑和小辣椒俩位老师的代码
<style>#mama { margin: 150px 0 30px calc(50% - 790px); width: 1400px; height: 800px; background: url(' https://pic.imgdb.cn/item/66ebc8dff21886ccc0a8273d.gif') no-repeat center/cover; box-shadow: 0 0 8px rgba(0,0,0,.65); overflow: hidden; z-index: 1; position: relative; }
#mama > video { position: absolute; width: 100%; height: 110%; top: -70px;object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(red, transparent); pointer-events: none; }
.player { position: absolute; top: 10px; width: 120px; height: 120px; animation: rot 8s linear infinite var(--state); cursor: pointer; }
.player:nth-of-type(1) {width: 100px; height: 100px; left: 48%; top:45%; }
.player:nth-of-type(2) { width: 150px; height: 150px; right: 10%;top:60%;}
.player:nth-of-type(3) { width: 80px; height: 80px; right: 16%;top:32%;}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=40257318.mp3" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/04/57/90/6490fb3b722ba.mp4" autoplay loop muted></video>
<img class="player" src="https://pic.imgdb.cn/item/66ebf486f21886ccc0d55213.png
" alt="" />
<img class="player" src="https://pic.imgdb.cn/item/66ebf486f21886ccc0d55213.png" alt="" />
<img class="player" src="https://pic.imgdb.cn/item/66ebf486f21886ccc0d55213.png " alt="" />
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/yslrc_133703119608822812.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
btnplay: '.player',
lrc_css: 'left: 54%; top: 85%; transform: translateX(-50%); font:normal 2.2em Microsoft clerical script;',
fs_css: 'left: 50%; bottom: 20px; transform: translateX(-50%); --bg: transparent; --color: #fff',
});
};
var geci = ` 作词 : 新疆民歌
作曲 : 新疆民歌
蓝宝石
词曲：新疆民歌
演唱：艾尼瓦尔江
我有一颗蓝宝石
做一对小耳环
把它挂在你的耳边
作一个爱的纪念
我有一颗蓝宝石
做一个小项链
把它挂在你的胸前
作一个爱的纪念
蓝宝石像海水
海水它深又蓝
它象征我的爱
我的爱无边
蓝宝石像海水
海水它深又蓝
要记住我的爱
我的爱不变
我有一颗蓝宝石
我有一颗蓝宝石
做一个小耳环
把它挂在你的耳边
作一个爱的纪念
蓝宝石像海水
海水它深又蓝
它象征我的爱
我的爱无边
蓝宝石像海水
海水它深又蓝
要记住我的爱
我的爱不变
要记住我的爱
我的爱不变
`;
</script> https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif
漂亮的动画制作，这个图好像放得有点大，有些模糊，原图更漂亮。
欣赏江南好帖{:4_199:} 奇怪，看到使用了遮罩，好像视频的logo还是能看到{:4_173:}那个小播也有点变形，一直没找出是怎么回事呢。
起个网名好难 发表于 2024-9-19 15:41
谢谢老师沙发支持，问好！ 红影 发表于 2024-9-19 16:04
漂亮的动画制作，这个图好像放得有点大，有些模糊，原图更漂亮。
欣赏江南好帖
问好影子，图片缩小，中心位置要换算过了。 歌曲很好听，很有民族风情{:4_204:} 红影 发表于 2024-9-19 16:07
奇怪，看到使用了遮罩，好像视频的logo还是能看到那个小播也有点变形，一直没找出是怎么回事呢。
...
我正奇怪着呢，不知道。{:4_201:} 梦江南 发表于 2024-9-19 16:24
问好影子，图片缩小，中心位置要换算过了。
哦，原来是这样的考虑。嗯嗯，反正也有全屏的点击的时候，倒也差不多{:4_173:} 梦江南 发表于 2024-9-19 16:26
我正奇怪着呢，不知道。
我也跑帖子里看半天，没弄明白小播怎么有点变形，可能是视觉差？ 红影 发表于 2024-9-19 16:25
歌曲很好听，很有民族风情
歌曲是新疆人唱的，是新疆歌。 红影 发表于 2024-9-19 16:26
哦，原来是这样的考虑。嗯嗯，反正也有全屏的点击的时候，倒也差不多
那就将就看。 红影 发表于 2024-9-19 16:28
我也跑帖子里看半天，没弄明白小播怎么有点变形，可能是视觉差？
这播放器是黑黑老师的锯片，用截图下来做的，在帖子上看看有点变形。 {:4_204:} 梦江南 发表于 2024-9-19 17:44
这播放器是黑黑老师的锯片，用截图下来做的，在帖子上看看有点变形。
可以直接存为图片的呢{:4_204:} 马黑黑 发表于 2024-9-19 23:04
谢谢黑黑老师支持鼓励！早上好！{:4_204:} 红影 发表于 2024-9-19 23:17
可以直接存为图片的呢
我是把黑黑老师的代码放到别的空间里，再截图下来的。下次试试。早上好！{:4_204:} 欣赏佳作，问候梦江南。 梦油 发表于 2024-9-20 09:05
欣赏佳作，问候梦江南。
谢谢梦油老师支持！问好！{:4_204:} 梦江南 发表于 2024-9-20 07:56
我是把黑黑老师的代码放到别的空间里，再截图下来的。下次试试。早上好！
黑黑有好几个直接把svg做图图，比较看看就知道了{:4_187:}