【黑师代码】繁花（学习黑师《新春》粒子飞舞效果）
本帖最后由 南无月 于 2024-2-19 19:07 编辑 <br /><br /><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],
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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> @马黑黑 跟了个新春的作业，老师来瞧瞧。。今天问题多了点，辛苦哈，上茶{:4_190:} 本帖最后由 马黑黑 于 2024-2-19 17:32 编辑
天女散红包散的比往年晚了一些{:4_170:} 马黑黑 发表于 2024-2-19 17:30
天女散红包散的玩了一下
哎，这个创意好，我怎么没想到应该把花换成红包。。{:4_173:} 马黑黑 发表于 2024-2-19 17:30
天女散红包散的比往年晚了一些
明年争取起个大早，抢个大红包{:4_189:} 南无月 发表于 2024-2-19 17:34
明年争取起个大早，抢个大红包
明年快到了 南无月 发表于 2024-2-19 17:33
哎，这个创意好，我怎么没想到应该把花换成红包。。
红包也可以团成一团的 马黑黑 发表于 2024-2-19 17:36
明年快到了
快了快了，还有三百多天。。{:4_173:} 南无月 发表于 2024-2-19 17:40
快了快了，还有三百多天。。
而且一天比一天少 马黑黑 发表于 2024-2-19 17:36
红包也可以团成一团的
团得跟花似的，砸几个给我吧。。{:4_173:} 南无月 发表于 2024-2-19 17:42
团得跟花似的，砸几个给我吧。。
危险行为 马黑黑 发表于 2024-2-19 17:41
而且一天比一天少
红包没少就行。。{:4_173:} 马黑黑 发表于 2024-2-19 17:43
危险行为
对我来说鞭炮才是危险行为。。{:4_173:} 南无月 发表于 2024-2-19 17:50
对我来说鞭炮才是危险行为。。
差不多的：红包可以买鞭炮 南无月 发表于 2024-2-19 17:49
红包没少就行。。
那个少不了 这制作好美，月儿聪明，将画面设计得如此巧妙，大赞{:4_199:} 醉美水芙蓉 发表于 2024-2-19 18:01
欣赏月儿的精彩！
感谢水妞支持{:4_183:}来抱个 马黑黑 发表于 2024-2-19 18:03
差不多的：红包可以买鞭炮
从安全到危险就是这么来的 马黑黑 发表于 2024-2-19 18:04
那个少不了
这话听着美滋滋。。{:4_173:}