《冰雪风暴》TO夕夕（学习黑黑 游心 效果）
<style>#papa {
margin: 60px 00 calc(50% - 681px);
width: 1200px;
height: 732px;
box-shadow: 4px 8px 28px gray;
background: url('https://n.sinaimg.cn/news/1_img/upload/72ef1310/101/w2048h1253/20231222/ee0c-0efbc12cb0ce7fdc4029fe1fb7a177a2.jpg') no-repeat center/cover;
clip-path:polygon(0% 0%, 100% 0%, 100% 94%, 0% 94%);
display: grid;
place-items: center;
position: relative;
}
li-zi {
position: absolute;
top:230px;
width: 45px;
height: 45px;
background: snow;
opacity: 0.2;
animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#pic { position: absolute; top: 100px; width: 300px; height: 300px; opacity: 0.95; z-index: 0; animation: zhuan 2s linear infinite var(--state);}
@keyframes moving {
from { transform: translate(0,0)rotate(0deg); opacity: 0.2; }
to { transform: translate(var(--xx),var(--yy))rotate(360deg); opacity: 1; }
}
@keyframes zhuan{0% {opacity: 1;filter:hue-rotate(360deg)}
50% {opacity: 0.2;}100% {opacity: 1;}
</style>
<div id="papa"><img id="pic" src="https://pic.imgdb.cn/item/6587b1aac458853aefbd96fd.png" alt="" /></div>
<script>
let total = 60;
let rx = papa.offsetWidth / 2 - 23, ry = papa.offsetHeight / 2 - 23;
Array.from({length: total}).forEach((item,key) => {
let rad = (Math.PI / 180) * 360 / total;
item = document.createElement('li-zi');
item.style.cssText += `
--xx: ${rx * Math.cos(rad * key)}px;
--yy: ${ry * Math.sin(rad * key)}px;
--duration: ${4 + Math.random() * 6}s;
--delay: -${Math.random() * 5}s;
background: url('https://pic.imgdb.cn/item/6587b3d0c458853aefc47bb1.png') no-repeat center/cover;
`;
papa.appendChild(item);
});
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let myplayer = new mPlayer();
myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1451352102');
myplayer.setBtnCss(`
background: url('https://pic.imgdb.cn/item/6587b492c458853aefc7344c.png') no-repeat center/cover;
width: 200px;
height: 200px;
filter: hue-rotate(200deg) opacity(.8); top: 160px;
`);
myplayer.setLrcCss('bottom:80px;color: lightblue; --bg: snow;');
myplayer.lrcAr = [];
};
</script> 我想让雪花也转起来和走到当中时淡点，好像没效果。@马黑黑
奇怪，我试贴的时候雪花停不了，发帖却是可以了。可能我的试贴的地方有别的帖子影响了吧。
下回让试贴的地方翻页吧，翻页后只有一个试帖应该就可以了{:4_173:} 想找个暴风中心之类的曲子，没找到，就这个吧。曲名Winter Snow Storms
背景图是从平安夜发的帖子里直接找了一个。省得上传了，谢谢@驻在平安夜前夕 {:4_204:} 红影 发表于 2023-12-24 14:40
想找个暴风中心之类的曲子，没找到，就这个吧。曲名Winter Snow Storms
背景图是从平安夜发的帖子里直接找 ...
带协我走进高大上{:5_108:} 驻在平安夜前夕 发表于 2023-12-24 15:23
带协我走进高大上
你的那个二十四节气的那个帖子里好多的好看图片呢，我只是选了其中的一个。{:4_173:}
谢谢夕夕{:4_187:} 驻在平安夜前夕 发表于 2023-12-24 15:23
带协我走进高大上
今天是夕夕来到花潮五周年的纪念日呢，这个帖子送给夕夕做礼物如何{:4_187:} 红影 发表于 2023-12-24 15:25
你的那个二十四节气的那个帖子里好多的好看图片呢，我只是选了其中的一个。
谢谢夕夕
喜欢就全选{:5_106:} 红影 发表于 2023-12-24 15:26
今天是夕夕来到花潮五周年的纪念日呢，这个帖子送给夕夕做礼物如何
那我就三克油啦{:5_108:} 红影 发表于 2023-12-24 15:26
今天是夕夕来到花潮五周年的纪念日呢，这个帖子送给夕夕做礼物如何
我自己都差点忘了{:5_106:} 驻在平安夜前夕 发表于 2023-12-24 15:27
喜欢就全选
好啊，等需要做帖子，我就再进去翻，那里的图图正好符合这个季节{:4_173:} 驻在平安夜前夕 发表于 2023-12-24 15:28
那我就三克油啦
不客气啊，正好用了你的图图，送你正好呢{:4_187:} 红影 发表于 2023-12-24 15:30
好啊，等需要做帖子，我就再进去翻，那里的图图正好符合这个季节
对，大约在冬季{:5_114:} 红影 发表于 2023-12-24 15:31
不客气啊，正好用了你的图图，送你正好呢
啱啱遇着刚刚{:5_106:} 驻在平安夜前夕 发表于 2023-12-24 15:28
我自己都差点忘了
五年了，时间真快啊{:4_187:} 驻在平安夜前夕 发表于 2023-12-24 15:31
对，大约在冬季
好冷的冬季啊，坐在这我都冷。夕夕那应该暖和些的吧{:4_204:} 驻在平安夜前夕 发表于 2023-12-24 15:32
啱啱遇着刚刚
看不懂{:4_189:} （一）
雪花宽高尺寸是 45*45，rx、ry 的赋值，
let rx = papa.offsetWidth / 2 - 10, ry = papa.offsetHeight / 2 - 10
应改为：
let rx = papa.offsetWidth / 2 - 23, ry = papa.offsetHeight / 2 - 23;
（二）雪花转动问题
关键帧动画代码：
from { transform: translate(0,0);rotate(0deg); opacity: 0.2; }
to { transform: translate(var(--xx),var(--yy));rotate(360deg); opacity: 1; }
应改为：
from { transform: translate(0,0) rotate(0deg); opacity: 0.2; }
to { transform: translate(var(--xx),var(--yy)) rotate(360deg); opacity: 1; }
原理：translate 和 rotate 都是 transform 的子内容，它们之间用空格隔开而不是分号。 本帖最后由 梦油 于 2023-12-24 15:49 编辑
你这音响得到太棒了。 马黑黑 发表于 2023-12-24 15:42
（一）
雪花宽高尺寸是 45*45，rx、ry 的赋值，
嗯嗯，我弄错了，translate 和 rotate 都是 transform 的子内容，我把rotate 当独立的了，谢谢黑黑{:4_187:} 马黑黑 发表于 2023-12-24 15:42
（一）
雪花宽高尺寸是 45*45，rx、ry 的赋值，
细节决定成败，很多时候一个细节错了，就折腾半天也不出效果，现在肯定记住了。
已经改好了，雪花终于可以转起来{:4_205:}