马黑黑 发表于 2023-8-14 22:28
好玩多玩玩不言谢
今天外出了，跑的挺累，准备下了，明天空了再玩{:4_204:}
红影 发表于 2023-8-14 22:30
用代码，，，哈哈，打错了3个字
额，印象中，没有叫永带的ID
红影 发表于 2023-8-14 22:31
今天外出了，跑的挺累，准备下了，明天空了再玩
OK
红影 发表于 2023-8-14 21:12
但是一看就知道是磁带呢，说明很成功
还行还行
梦油 发表于 2023-8-14 21:09
再过几十年就成文物了
成不了，因为一直还在使用。我告诉你把，磁带是存储介质中最廉价的，一些监听材料，多数都会保存在卡式磁带里，很多国家都这么做。
花飞飞 发表于 2023-8-14 20:35
你在哪条街啊。
天街
马黑黑 发表于 2023-8-14 22:40
天街
小雨润如酥。。。
花飞飞 发表于 2023-8-15 00:46
小雨润如酥。。。
很美的情景
本帖最后由 马黑黑 于 2023-8-15 07:19 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 734px; background: url('https://638183.freep.cn/638183/t23/3/vuer.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
.clover { position: absolute; bottom: -200px; width: 100px; height: 100px; background: snow; opacity: .7; animation: up 20s var(--delay) infinite linear var(--state); }
@keyframes up { to { transform: rotate(var(--deg)) translateY(-1200px) rotate(2turn); } }</style>
<div id="papa">
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/08/02/5cc93d2f1c24f40b50d268cd21ec7891.mp3" autoplay="" loop=""></audio>
<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/tape_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
(function() {
let geci = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
let mkClover = (ele,num) => {
let r = ele.offsetWidth / 2, pathAr = [];
for(let i = 0; i < 200; i ++) {
let angle = i * 2 * Math.PI / 200;
let x = r - r * Math.sin(num * angle) * Math.cos(angle);
let y = r - r * Math.sin(num * angle) * Math.sin(angle);
pathAr.push(x + 'px ' + y + 'px');
}
return 'polygon(' + pathAr.join(', ') + ')';
}
Array.from({length: 16}).forEach((item) => {
let ww = 50 + Math.floor(Math.random() * 50);
let ar = ;
item = document.createElement('span');
item.className = 'clover';
item.style.cssText += `
--deg: ${60 - Math.random() * 150}deg;
--delay: ${Math.random() * 10 - 10}s;
width: ${ww}px;
height: ${ww}px;
right: 200px;
`;
papa.appendChild(item);
item.style.clipPath = mkClover(item, ar);
});
window.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
top: 20px;
color: #999;
--bg: linear-gradient(rgba(250,250,250,.25),rgba(138,64,30,.65));
`,
player_css: `
bottom: 30px;
left: 65%;
color: lightblue;
z-index: 100;
--track: darkgray;
--prog: red;
`,
fs_css: `bottom: 30px; --bg: #333; --color: white;`,
title: '刀郎 -珠儿',
});
};
})();
</script>
马黑黑 发表于 2023-8-14 22:31
不是这个意思。用图片吧，JS要做个接口，然后，你还不知道图片会不会与你的设计相一致。
哦，你是说上传打包啊，这个的确是全部代码可操作的可能性高。
马黑黑 发表于 2023-8-14 22:31
额，印象中，没有叫永带的ID
哈哈，这个字错得那么奇葩，自己看得都发笑{:4_170:}
马黑黑 发表于 2023-8-14 22:32
OK
结果今天就有新的修正好的终极版卡式磁带了，这个真棒{:4_187:}
马黑黑 发表于 2023-8-14 22:33
还行还行
做在帖子里还挺漂亮呢{:4_199:}
红影 发表于 2023-8-15 10:42
做在帖子里还挺漂亮呢
我觉得，我再集合里的演示的配色可能更漂亮
红影 发表于 2023-8-15 10:41
结果今天就有新的修正好的终极版卡式磁带了，这个真棒
昨天就已经做好的，因为用 window.onload = () => {} 加载插件慢，就拖着不发，今早上也没能找到好的办法，中午下班前突然想到可以在 JS 资源文件的加载事件做文章。珠儿那个帖子，现在已经改用此法替代 window.onload事件，刷新一下看看效果。
红影 发表于 2023-8-15 10:40
哈哈，这个字错得那么奇葩，自己看得都发笑
嗯，永带却是个好名字
红影 发表于 2023-8-15 10:39
哦，你是说上传打包啊，这个的确是全部代码可操作的可能性高。
除此之外，对可接入的图片，也是不好控制的。
马黑黑 发表于 2023-8-15 11:54
我觉得，我再集合里的演示的配色可能更漂亮
黑黑弄得很细致，很赞{:4_187:}
马黑黑 发表于 2023-8-15 11:57
昨天就已经做好的，因为用 window.onload = () => {} 加载插件慢，就拖着不发，今早上也没能找到好的办法 ...
是的，现在快多了。这个多叶草也很漂亮。{:4_187:}
马黑黑 发表于 2023-8-15 11:57
嗯，永带却是个好名字
这个名字估计没人起吧{:4_173:}