【黑师代码】一次就好（学习黑师20240626《永远的长安》花朵飞舞效果）
本帖最后由 南无月 于 2024-6-26 22:13 编辑 <br /><br /><style>#tz { margin: 30px 0; left: 50%; transform: translateX(calc(-50% - 81px)); width: 1700px; height: 640px; overflow: hidden; background: lightblue url('https://642303.freep.cn/642303/tu/24062600.webp') no-repeat center/cover; border: 10px inset tan; z-index: 1; position: relative; --distance: 1900px; }
#tz::before{ position: absolute; content: ''; right: 330px; top: 20px; width: 100%; height: 130%; overflow: hidden; transform-origin: calc(100% - 130px) 70px; background: repeating-conic-gradient(at calc(100% - 130px) 70px, hsla(0,0%,100%,.2) 0 2deg,transparent 0 25deg); animation: opa 5s linear infinite var(--state), rot1 16s infinite var(--state); }
@keyframes rot1 { to { transform: rotate(45deg); } }
@keyframes rot2 { from { transform: rotate(-15deg) scale(1); } to { transform: rotate(180deg) scale(1.3); } }
@keyframes opa { from { opacity: 0; } to { opacity: .55; } }
li-zi { position: absolute; top: -100px; font-size:26px; animation: fly 20s cubic-bezier(0.49, 0.72, 0.72, 0.47) infinite var(--state);z-index: 10;}
#player { position: absolute; left: calc(50% - 560px); bottom: 90px; width: 120px; height: 120px; cursor: pointer; filter: hue-rotate(0deg); transition: .5s; animation: rot 8s linear infinite var(--state); z-index: 11;}
#player:hover { filter: hue-rotate(130deg); }
@keyframes fly { to { transform: rotate(90deg) translateY(var(--distance)); } }
@keyframes rot { to { transform: rotate(1turn); } }
.mypic1 {
position: absolute;
right:800px;
top:40px;
mix-blend-mode: Multiply;
z-index: 3;
}
#tz::after {
position: absolute;
content: '';
width: 406px;
height: 545px;
background: url('https://642303.freep.cn/642303/tu/wu.png') no-repeat center/cover;
pointer-events: auto;
transform-origin: 50% 100%;
animation: dance 2.2s var(--delay) infinite alternate linear var(--state);
}
#tz::after {
left: calc(50% - 72px);
bottom: 0px;
--delay: .25s;
}
@keyframes dance {
from { transform: skewX(-2deg); }
to {transform: skewX(2deg); }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1863155247" autoplay loop></audio>
<div class="mypic1"><img src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" /></div>
<img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/small/hxxb.webp" />
</div>
<script>
new Array(total = 160).fill(0).map((i,k) => {
i = document.createElement('li-zi');
i.innerHTML = ['🌸','💮','🌺'];
i.style.cssText += `
right: ${Math.floor(30 * Math.random()) -6}%;
animation-delay: -${Math.random() * 30}s;
`;
tz.prepend(i);
});
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#tz',
css: 'top: -460px; left: 80%; transform: translate(-50%); --color: snow; --fsBg: rgba(224,144,113,.7);',
});
window.onresize = () => tz.style.setProperty('--distance', tz.offsetWidth + 'px');
</script>
<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: '#tz',
lrcAr: geci,
btn: '#player',
lrc_css: 'bottom: 26px;left: 50%; transform: translate(-50%); --bg: linear-gradient(rgba(250,250,250,.25),rgba(238,130,238,.65)); opacity: .99;font-size: 26px;color: #fff;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
@马黑黑 白老师来瞧一眼。。今天的花朵飞舞效果。{:4_173:} 这个图有太阳需要一个光束，就把之前用过的那个光束搬来了。
花朵飞舞方向改了一下，下方裙摆处停留一会，再飞出去{:4_173:}这个凭感觉改了一下数据 本来人物是静态的，后来感觉应该灵动一点，就加了个摇摆效果。。
小鸟是顺手加的。。
歌词和歌名用了之前的一曲。好听的这首歌。。
全屏按纽隐去了。。{:4_173:} 月儿把花朵换了一个方向呢，和背景的花朵相配合，好一片花儿的海洋{:4_199:} 画面太美，人美、地上的花儿美，飘动的粒子小朵美，播放器美，那个白衣素裙的人更美！ 人物还会动的呢，光线的设置也漂亮。欣赏月儿好帖{:4_199:} 美美哒
这个方向吗，播放器应该顺时针旋转 醉美水芙蓉 发表于 2024-6-26 19:53
月儿厉害了！做得效果漂亮！
谢谢水妞支持鼓励。。{:4_187:} 马黑黑 发表于 2024-6-26 18:59
美美哒
这个方向吗，播放器应该顺时针旋转
这是我做这贴子的盲点~~完全没考虑到小播的方向{:4_173:} 马黑黑 发表于 2024-6-26 18:59
美美哒
这个方向吗，播放器应该顺时针旋转
站里这贴有点问题，改不好~~辛苦老师得空去瞧一眼好不呀{:4_173:} 红影 发表于 2024-6-26 18:56
人物还会动的呢，光线的设置也漂亮。欣赏月儿好帖
摇摆一下有点跳舞的感觉，没那么板。。{:4_173:} 樵歌 发表于 2024-6-26 18:55
画面太美，人美、地上的花儿美，飘动的粒子小朵美，播放器美，那个白衣素裙的人更美！
感谢樵管支持鼓励{:4_190:} 红影 发表于 2024-6-26 18:55
月儿把花朵换了一个方向呢，和背景的花朵相配合，好一片花儿的海洋
这个粒子效果足够漂亮，所以就没怎么更改了。。{:4_187:} 南无月 发表于 2024-6-26 20:46
摇摆一下有点跳舞的感觉，没那么板。。
是啊，发现倾斜命令用于人物特别好看呢{:4_187:} 南无月 发表于 2024-6-26 20:45
站里这贴有点问题，改不好~~辛苦老师得空去瞧一眼好不呀
就是撑宽吧？改用 margin 定位就可以了 南无月 发表于 2024-6-26 20:47
这个粒子效果足够漂亮，所以就没怎么更改了。。
月儿还加了歌词，厉害{:4_187:} 马黑黑 发表于 2024-6-26 21:12
就是撑宽吧？改用 margin 定位就可以了
{:4_170:}好。。。我看它好了 红影 发表于 2024-6-26 21:12
月儿还加了歌词，厉害
这个歌词代码是编辑器里自动生成，常用的{:4_187:}