生活的重拳 TO：千羽 （学习黑黑老磁带播放器效果）
<style>#papa { margin: 140px 0 0 calc(50% - 775px); width: 1376px; height: 775px; background: url('https://wj.zp68.com/lxx/yunhua/2023/08/17/3IF.gif') 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="https://aod.cos.tx.xmcdn.com/storages/34f3-audiofreehighqps/DB/A1/GMCoOSEIseW7ACAAAAJJtW0H.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 < 80; i ++) {
let angle = i * 2 * Math.PI / 80;
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 =10 + Math.floor(Math.random() * 10);
let ar = ;
item = document.createElement('span');
item.className = 'clover';
item.style.cssText += `
--deg: ${30 - Math.random() * 50}deg;
--delay: ${Math.random() * 10 - 10}s;
width: ${ww}px;
height: ${ww}px;
right: 200px;
`;
papa.appendChild(item);
item.style.clipPath = mkClover(item, ar);
});
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
top: 80px;
color: #eee;
--bg: linear-gradient(rgba(250,250,250,.25),rgba(138,64,30,.65));
`,
player_css: `
bottom: 27%;
left: 39%;
color: Lavender;
z-index: 100;
--track: darkgray;
--prog: Indigo;
`,
fs_css: `bottom: 30px; --bg: #333; --color: white;`,
title: '生活的重拳 (Live合唱版)',
});
};
})();
</script>
@千羽
记得我以前送过你一个别墅外景的房子，今天送个别墅里面房间的效果了{:4_170:} @马黑黑
谢谢黑黑的教程分享，小辣椒套用一个了。 小辣椒棒棒哒！{:4_187:} 焱鑫磊 发表于 2023-8-18 21:00
小辣椒棒棒哒！
焱鑫磊晚上好，谢谢欣赏~{:4_171:} 亲爱的这个背景太棒了，各种动态都非常精美，这个太不容易了{:4_199:} 你眼睛有问题，还做这么难度的背景啊。亲爱的多养着{:4_179:} 这个磁带放得巧妙，歌词同步色彩和同步都很好，欣赏亲爱的好帖{:4_187:} 红影 发表于 2023-8-18 21:22
亲爱的这个背景太棒了，各种动态都非常精美，这个太不容易了
就想怎么在家里放个老磁带播放器，又想和歌曲相配。。。这个图花了一点时间的 红影 发表于 2023-8-18 21:24
你眼睛有问题，还做这么难度的背景啊。亲爱的多养着
想玩的时候就很难控制了 红影 发表于 2023-8-18 21:25
这个磁带放得巧妙，歌词同步色彩和同步都很好，欣赏亲爱的好帖
这首歌我也是很喜欢的{:4_189:} 醉美水芙蓉 发表于 2023-8-18 21:37
播放器颜色漂亮！
谢谢水芙蓉欣赏，播放器颜色可以自己改的 抓住！
赶快下了去休息 送小仙女的，赶快呼叫@千羽 {:4_195:} 小辣椒 发表于 2023-8-18 21:43
想玩的时候就很难控制了
坚持一下，控制一段时间就好了 冬天的雨 发表于 2023-8-18 21:59
坚持一下，控制一段时间就好了
好的，我就下了，晚安 小辣椒 发表于 2023-8-18 20:54
@千羽
记得我以前送过你一个别墅外景的房子，今天送个别墅里面房间的效果了
刚才看到了，立马飞奔而来{:4_173:} 小辣椒 发表于 2023-8-18 22:10
好的，我就下了，晚安
晚安~~~好梦{:4_179:} 千羽 发表于 2023-8-18 22:12
刚才看到了，立马飞奔而来
小仙女来了{:4_187:}