有个傻瓜在想你 （学习套用黑黑svg锯片 播放器效果）
<style>#mama { margin: 150px 0 30px calc(50% - 881px); width: 1600px; height: 800px; background: url(' https://xlaj.cn/assets/file/zp/20240918195613.jpg') 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: 100%; 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: 80px; height: 80px; left: 54%; top:32%; }
.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://aod.cos.tx.xmcdn.com/storages/abb5-audiofreehighqps/10/07/GKwRIRwKvV5rACAAAAMQsJCu.m4a" 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://xlaj.cn/assets/file/zp/20240918123523.svg " alt="" />
<img class="player" src="https://xlaj.cn/assets/file/zp/20240918125640.svg" alt="" />
<img class="player" src="https://xlaj.cn/assets/file/zp/20240918123523.svg " 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: 60%; top: 80%; 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 = `有个傻瓜在想你
作词：音萌萌
作曲：音萌萌
演唱：小雨点
编曲：李信壮
和声：小优
混音：罗旦
视觉：夏雪
出品：昆明·猫舍音乐人团队
OP：浅澜文化
我们再没有联系
自你离开那天起
一切就这么烟消云尽
我是多舍不得你
可又不想纠缠你
你的心已不在我这里
想祝你以后开心
又怕你真的开心
我也想你为我伤次心
自从和你在一起
碎了整整一颗心
我却还是会放不下你
有个傻瓜在想你
无论你人在哪里
请记得还有我在乎你
你要照顾好自己
每天要按时休息
只要你愿意我等你
有个傻瓜在想你
每天都很想念你
还希望能和你在一起
哪怕再重蹈经历
哪怕再碎一次心
有个傻瓜还是愿意
。。。。。。
想祝你以后开心
又怕你真的开心
我也想你为我伤次心
自从和你在一起
碎了整整一颗心
我却还是会放不下你
有个傻瓜在想你
无论你人在哪里
请记得还有我在乎你
你要照顾好自己
每天要按时休息
只要你愿意我等你
有个傻瓜在想你
每天都很想念你
还希望能和你在一起
哪怕再重蹈经历
哪怕再碎一次心
有个傻瓜还是愿意
谢谢欣赏
`;
</script>
<br><br><br><br><br> @马黑黑
黑黑我自己做了2个svg图片，今天发现没有你今天发的漂亮{:4_198:} 哈哈，小辣椒就是个傻瓜{:4_205:} 这个锯片效果的小播也漂亮呢，亲爱的还加了歌词同步。
欣赏亲爱的漂亮制作{:4_199:} 小辣椒 发表于 2024-9-18 20:29
@马黑黑
黑黑我自己做了2个svg图片，今天发现没有你今天发的漂亮
原来是两个颜色不同的svg图片，还在想着如果是大小不同，只要做一个就够了呢{:4_173:} 红影 发表于 2024-9-18 20:53
这个锯片效果的小播也漂亮呢，亲爱的还加了歌词同步。
欣赏亲爱的漂亮制作
亲爱的，我套用黑黑的{:4_173:} 红影 发表于 2024-9-18 20:55
原来是两个颜色不同的svg图片，还在想着如果是大小不同，只要做一个就够了呢
做了2个svg图片 小辣椒 发表于 2024-9-18 21:38
亲爱的，我套用黑黑的
套用得漂亮{:4_187:} 小辣椒 发表于 2024-9-18 21:38
做了2个svg图片
嗯嗯，看到了{:4_204:} 小辣椒 发表于 2024-9-18 20:29
@马黑黑
黑黑我自己做了2个svg图片，今天发现没有你今天发的漂亮
你这是切傻瓜用的锯片，我那时纸风车。各有所用就好 https://5b0988e595225.cdn.sohucs.com/images/20190627/2fcecd89550b4c1cb36ee7bff90ab110.gif
这个标题十分风趣。 欣赏老师精美音画，赞啦！{:4_204:} 精彩制作，欣赏学习咯{:4_204:} 红影 发表于 2024-9-18 23:08
套用得漂亮
现在小辣椒就会套用了 红影 发表于 2024-9-18 23:08
嗯嗯，看到了
这个还是简单的，难的我就不会了 马黑黑 发表于 2024-9-18 23:29
你这是切傻瓜用的锯片，我那时纸风车。各有所用就好
感觉这个可以做按钮就玩一下了 起个网名好难 发表于 2024-9-19 07:34
难难好，谢谢欣赏{:4_187:} 梦油 发表于 2024-9-19 09:16
这个标题十分风趣。
梦油好，都是好玩而已{:4_205:} 梦江南 发表于 2024-9-19 09:25
欣赏老师精美音画，赞啦！
问好梦江南，谢谢欣赏{:4_171:}