小辣椒 发表于 2024-9-18 20:51

有个傻瓜在想你 自己做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>

小辣椒 发表于 2024-9-18 20:52

三个svg播放器 关联点击停止

小辣椒 发表于 2024-9-18 20:52

同一首完成

liumang 发表于 2024-9-18 22:30

小辣椒自己做svg图片{:5_150:}

liumang 发表于 2024-9-18 22:31

哈哈，这个同一首好，{:5_150:}

liumang 发表于 2024-9-18 22:32

有个傻瓜在想你{:6_181:}

小辣椒 发表于 2024-9-20 22:18

liumang 发表于 2024-9-18 22:32
有个傻瓜在想你

是啊，那谁谁是个傻瓜{:6_181:}

liumang 发表于 2024-9-21 11:27

小辣椒 发表于 2024-9-20 22:18
是啊，那谁谁是个傻瓜

{:5_143:}{:5_143:}{:5_143:}

小辣椒 发表于 2024-9-22 22:09

liumang 发表于 2024-9-21 11:27


{:5_140:}{:5_140:}{:5_140:}
页: [1]
查看完整版本: 有个傻瓜在想你 自己做svg用做播放器