本帖最后由 花简静 于 2024-8-18 15:16 编辑
<style>
#papa { position: relative; margin: 0 0 0 calc(50% - 831px);width: 1500px; height: 800px; top:130px;background: url('https://pic.imgdb.cn/item/65c86e4a9f345e8d03468f55.webp') no-repeat center/cover; background-blend-mode: normal; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; }
#papa img { position: absolute; cursor: pointer; mix-blend-mode: normal; transform-origin: 50% 0; animation: swear 1s infinite alternate var(--state); }
#papa img:nth-of-type(1) { top: 66px; right: 156px; }
#papa img:nth-of-type(2) { top: 0; left: 0; }
li-zi { position: absolute; left: 630px; top: 280px; width: 20px; height: 20px; border-radius: 50%; background: pink; }
@keyframes moving { from { transform: rotate(0) translate(0,0); } to { transform: rotate(var(--deg)) translate(500px,700px); } }
@keyframes swear { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1867132755" autoplay loop></audio>
<img src="https://pic.imgdb.cn/item/65c8525b9f345e8d03fffce4.png" alt="" />
<img src="https://pic.imgdb.cn/item/65d30f429f345e8d0369c0c3.png" alt="" />
</div>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#papa img',
lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(220,20,60.65)); position: absolute;opacity: .85; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
});
};
let geci = [
[-1.6,"单曲：繁花（古风女版）",1.6],
[3.23,"歌手：锦瑟",1.2],
[4.46,"所属专辑：繁花—《三生三世十里桃花》插曲",1.1],
[5.59,"学习黑师《新春》粒子飞舞效果",5.2],
[10.83,"",12.9],
[23.07,"遇见你的眉眼",2.9],
[26.05,"如清风明月",2.8],
[29.07,"在似曾相识的凡世间",4.7],
[35.03,"顾盼流连",2.5],
[38.17,"如时光搁浅",2.4],
[41.1,"是重逢 亦如初见",3.8],
[47.02,"缠绵缱绻",2.0],
[49.01,"有你的思念",3.1],
[52.09,"温暖在我掌心蔓延",4.6],
[58,"无涯荒野",2.9],
[61,"谁忘了时间",2.8],
[64.06,"一半青涩 一半纯真",4.1],
[73.06,"数着年月只为花开那一面",5.0],
[78.09,"就算来来回回错过又擦肩",5.2],
[84.08,"你的喜悲忧乐我全都预见",5.9],
[90.02,"三千繁花只为你一人留恋",5.7],
[108.04,"遇见你的眉眼",2.7],
[111.29,"如清风明月",2.4],
[114.05,"在似曾相识的凡世间",4.6],
[120.01,"顾盼流连",2.1],
[122.07,"如时光搁浅",3.0],
[125.08,"是重逢 亦如初见",4.8],
[132.01,"梦醒蹁跹",2.0],
[134.02,"有你的画面",3.1],
[137.08,"温热仍在心底蔓延",4.4],
[144.05,"混沌流年",1.8],
[146.41,"谁忘了誓言",2.4],
[149.4,"一半苦涩 一半情深",3.6],
[158.15,"数着年月只为花开那一面",4.9],
[163.07,"就算来来回回错过又擦肩",5.2],
[170.02,"你的喜悲忧乐我全都预见",5.0],
[175.05,"三千繁花只为你一人留恋",5.2],
[181.03,"数着年月只为花开那一面",5.7],
[187.29,"就算来来回回错过又擦肩",4.4],
[193,"你的喜悲忧乐我全都预见",5.5],
[199.09,"三千繁花只为你一人留恋",4.6]
];
var imgs = document.querySelectorAll('#papa > img');
var all = 60;
for(let i = 0; i < all; i++) {
let lz = document.createElement('li-zi');
lz.style.cssText += `
--deg: ${Math.random() * -60}deg;
background: url('https://pic.imgdb.cn/item/6587b11ac458853aefbbd724.png') no-repeat center/cover;
opacity: ${Math.random()};
animation: moving ${Math.random() * 4 + 4}s -${Math.random() * 4}s infinite var(--state);
`;
papa.prepend(lz);
}
var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused')) : (papa.style.setProperty('--state', 'running'));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
imgs.forEach(img => img.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
<br><br><br><br><br><br><br>
|
