《离别开出花》（学习黑黑《回忆》代码效果）
<style>
#mydiv { margin: 130px 0 30px calc(50% - 681px); width: 1200px; height: 720px; background: url('https://pic.imgdb.cn/item/66895964d9c307b7e9a8c5cc.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #333; overflow: hidden; display: grid; place-items: center; position: relative; }
#mydiv::after {content: attr(data-lrc); position: absolute; bottom: 30px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px \6977\4F53; color: transparent;text-shadow: 2px 2px 2px #8B4513;background: radial-gradient(pink, white, Salmon) center/120px 60px; -webkit-background-clip: text;}
#mydiv::before { position: absolute; content: ''; inset: 0; background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 11px, transparent 12px), repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), linear-gradient(180deg, hsl(31,100%,50%), hsl(51,100%,50%), hsl(71,100%,50%), hsl(178,100%,50%), hsl(234,100%,82%)); mix-blend-mode: color-dodge; animation: chg 6s linear infinite var(--state); }
#player { position: absolute; left: 45%; top: 19.5%; width: 120px; filter: hue-rotate(320deg); z-index: 10; transition: width .5s; opacity: .5; cursor: pointer; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(240deg); }
#vid { position: absolute; left: -200px; top: -10px; opacity: .3; width: 80%; height: 50%;transform: rotate(20deg); object-fit: cover; mix-blend-mode: multiply; pointer-events: none; }
#pic { position: absolute; width: 46px; bottom: 70px; left: 100px; transform-origin:left bottom;transform: rotate(-1deg); animation: hy 1.2sinfinite alternate linear var(--state);}
@keyframes hy { from { opacity: 0.6; transform: rotate(-1deg); }to { opacity: .25; transform: rotate(2deg); }}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes chg { to { inset: -60px; } }
</style>
<div id="mydiv" class="mydiv" data-lrc="HUACHAO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2061978961" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec494a494d82.mp4" autoplay loop muted></video>
<img id="player" alt="" src="https://pic.imgdb.cn/item/66895d72d9c307b7e9b28032.png" titel="播放/暂停" />
<img id="pic" alt="" src="https://pic.imgdb.cn/item/6689ead1d9c307b7e96825ed.png" />
</div>
<script>
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: '#mydiv',
css: 'bottom: 100px; left: 50%; transform: translate(-50%); --color: rgba(210,105,30,0.5); --fsBg: transparent;',
});
var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onseeked = () => curkey = 0;
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
mydiv.dataset.lrc = lrcAr;
curkey ++;
}
};
var lrc = `
《离别开出花》\n歌手：就是南方凯\n 所属专辑：离别开出花\n 学习黑黑《回忆》代码效果\n 感谢黑黑的代码\n坐上那朵离家的云霞\n飘去无人知晓的天涯\n背着妈妈说的那句话\n孩子人生其实不复杂\n\n喔～眼泪轻轻地擦\n别管那多嘴乌鸦\n咽下那些风沙\n你才能慢慢长大\n要错过几个她\n用你最好的年华\n这是青春的代价\n\n当离别开出花\n伸出新长的枝桠\n像冬去春又来\n等待心雪融化\n\n你每次离开家\n带着远方的牵挂\n那城市的繁华\n盖住了月牙\n\n当离别开出花\n它生长在悬崖\n在最高的山顶\n才听得见回答\n\n没什么好害怕\n孩子放心去飞吧\n在你的身后\n有个等你的家\n\n坐上那朵离家的云霞\n飘去无人知晓的天涯\n背着妈妈说的那句话\n孩子人生其实不复杂\n\n喔～眼泪轻轻地擦\n别忘那童年梦话\n散在远方的花\n也随风慢慢长大\n要错过几个她\n用你最真的年华\n这是青春的回答\n\n当离别开出花\n伸出新长的枝桠\n像冬去春又来\n等待心雪融化\n\n你每次离开家\n带着远方的牵挂\n那城市的繁华\n盖住了月牙\n\n当离别开出花\n它生长在悬崖\n在最高的山顶\n才听得见回答\n\n没什么好害怕\n孩子放心去飞吧\n在你的身后\n有个等你的家\n\n当离别开出花\n伸出新长的枝桠\n像冬去春又来\n等待心雪融化\n\n你每次离开家\n带着远方的牵挂\n那城市的繁华\n盖住了月牙\n\n当离别开出花\n它生长在悬崖\n在最高的山顶\n才听得见回答\n\n没什么好害怕\n孩子放心去飞吧\n在你的身后\n有个等你的家\n\n 哦~哦~哦~哦~哦~
`;
getAr(lrc);
</script> 换了个颜色混合试试，貌似小点点太亮了点@马黑黑 {:4_173:} 醉美水芙蓉 发表于 2024-7-7 10:04
还有个人在摇摆，红影最会玩了！
那个是挥手告别的人，有告别才有离别开出花啊{:4_173:} 醉美水芙蓉 发表于 2024-7-7 10:02
欣赏红影的精彩！
谢谢水芙蓉美女鼓励{:4_187:} 醉美水芙蓉 发表于 2024-7-7 10:03
很漂亮的制作！
问水芙蓉美女，周日快乐{:4_187:} 这个厉害，太赞了 欣赏影子的精彩音画制作！周日快乐！ https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 亲爱的，我刚做了这个作业，小点点没有你的明显，感觉你的点点增大了，这样效果更加好，我重新去调整看看，再发了{:4_170:} 代码真神奇，这些缓缓移动的小点点很漂亮。 唯美的设计，十分喜欢。问好恩师！{:4_190:} 给天地都蒙上一层面纱，更显得伤离别！{:4_187:} 整贴色彩真是太漂亮了。。梦幻迷离之感。。。小播，背景，粒子，歌词。。全是同色系。。超美。。 加了视频，加了动态人物，加了歌词，有条不紊完美运行。。
这个代码组合十分完美。。{:4_187:} 歌词用楷体，还加了一些立体效果，这个是真的漂亮。。
视频给了个20度的倾斜，飞鸟方向非常合理。。
影子的代码灵活运用真是到了极致。。{:4_187:} 亲爱的，你手机看一下效果 马黑黑 发表于 2024-7-7 10:56
这个厉害，太赞了
谢谢黑黑的代码，也谢谢黑黑的鼓励{:4_187:}