祝花潮论坛马到成功，一年更比一年好！[红灯笼移置]
本帖最后由 亚伦影音工作室 于 2026-2-24 10:32 编辑 <br /><br /><style type="text/css">@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa { margin: 10px 0 20px calc(50% - 721px); background:#000 url(https://wj.zp68.com/lxx/yunhua/2026/02/15/01.jpg) no-repeat center/1286px 720px; width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;--state: running;font-family: "华文行楷","Ma Shan Zheng","SimHei", "Arial", "sans-serif"; }
.ppnnt {animation: rotd 1s linear infinite var(--state);width: 100%; height: 100%;
background: url("https://wj.zp68.com/lxx/yunhua/2026/02/15/01.jpg")no-repeat center/100% 100%;
position: absolute;
top: 0px;
left: 0px;}
@keyframes rotd {to {filter: hue-rotate(360deg);}}
/* 灯笼容器 */
.lantern-con1 {
position: relative;
width: 200px;
height: 180px;
}
/* 灯笼中间红色区域 */
.lantern-light1 {
position: relative;
width: 120px;
height: 90px;
background-color: red;
margin: 30px;
border-radius: 50%;
box-shadow: -5px 5px 50px 4px #fa6c00;
/* 设置旋转点 */
transform-origin: top center;
animation: swing1 3s infinite ease-in-out var(--state);
}
/* 灯笼顶部和底部的样式 */
.lantern-light1::before,
.lantern-light1::after {
content: '';
position: absolute;
border: 1px solid #dc8f03;
width: 60px;
height: 12px;
/* 背景渐变 */
background: linear-gradient(
to right,
#dc8f03,
#ffa500,
#555555,
#ffa500,
#dc8f03
);
left: 30px;
}
/* 顶部位置 */
.lantern-light1::before {
top: -7px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* 底部位置 */
.lantern-light1::after {
bottom: -7px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* 灯笼提线样式 */
.lantern-line1 {
width: 2px;
height: 50px;
background-color: #dc8f03;
position: relative;
left: 88px;
top: 22px;
}
/* 灯笼动画 */
@keyframes swing1 {
0% { transform: rotate(-6deg); }
50% { transform: rotate(6deg); }
100% { transform: rotate(-6deg); }
}
/* 灯笼主体线条 */
.lantern-circle1,
.lantern-rect1 {
height: 90px;
border-radius: 50%;
border: 2px solid #dc8f03;
background-color: rgba(216, 0, 15, 0.1);
}
/* 外层 */
.lantern-circle1 {
width: 100px;
margin: 12px 8px 8px 10px;
}
/* 内层 */
.lantern-rect1 {
margin: -2px 8px 8px 26px;
width: 45px;
}
/* 文字样式 */
.lantern-text1 {
font-size: 28px;
font-weight: bold;
text-align: center;
color: #555555;
margin-top: 4px;
}
/* 灯穗 */
.lantern-tassel-top1 {
width: 5px;
height: 20px;
background-color: #ffa500;
border-radius: 0 0 5px 5px;
position: relative;
margin: -5px 0 0 59px;
/* 灯穗动画 */
animation: swing1 3s infinite ease-in-out var(--state);
}
.lantern-tassel-middle,
.lantern-tassel-bottom {
position: absolute;
width: 10px;
left: -2px;
}
.lantern-tassel-middle {
border-radius: 50%;
top: 14px;
height: 10px;
background-color: #dc8f03;
z-index: 2;
}
.lantern-tassel-bottom {
background-color: #ffa500;
border-bottom-left-radius: 5px;
height: 35px;
top: 18px;
z-index: 1;
}
.chooseBtn { opacity: 0;}
.g-container{top:-160px; left:0px;z-index: 1;
display: inline-block; vertical-align: middle;
perspective: 4px;mix-blend-mode: lighten;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear var(--state);
}
.g-container{
display: inline-block;
vertical-align: middle;
perspective: 4px;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear var(--state);
}
.g-group{
position: absolute;
/* perspective: 4px; */
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
animation: move 12s infinite linear var(--state);
animation-fill-mode: forwards;
}
.item {
position: absolute;
width: 100%;
height: 100%;
background:url(https://pic.imgdb.cn/item/67680391d0e0a243d4e80f3a.png),url(https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png),url(https://pic.imgdb.cn/item/67544ea7d0e0a243d4dfc9b3.png),url(https://pic.imgdb.cn/item/67544ea7d0e0a243d4dfc9b3.png);
background-size: cover;
opacity: 1;
animation: fade 12s infinite linear var(--state);
animation-delay: 0;
}
.g-group:nth-child(2) .item {
animation-delay: -6s;
}
.item-right {
transform: rotateY(90deg) translateZ(500px);
}
.item-left {
transform: rotateY(-90deg) translateZ(500px);
}
.item-top {
transform: rotateX(90deg) translateZ(500px);
}
.item-bottom {
transform: rotateX(-90deg) translateZ(500px);
}
.item-middle {
transform: rotateX(180deg) translateZ(1000px);
}
@keyframes move {
0%{
transform: translateZ(-500px) rotate(0deg);
}
100%{
transform: translateZ(500px) rotate(0deg);
}
}
@keyframes fade {
0%{
opacity: 0;
}
25%,
60%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes hueRotate {
0% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(360deg);
}
}
.lyrics{margin: 0;z-index: 20;
top: 89%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px; /* 调整高度，只容纳当前歌词 */
text-align: center;
position: absolute;animation:flash 1s infinite alternate var(--state);
}
.lyric-line{
width: 100%;
position: relative;
height: 60px;
overflow: visible;font-size: 44px;
font-width: 400 ;
line-height: 60px;
text-align: left;
white-space: nowrap; /* 禁止换行 */
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
}
.lyric-mask {
position: absolute;
top: 0;
left: 0;
width: 0;
overflow: hidden;
color: #ff0000;
height: 100%;
white-space: nowrap;
}
.lyric-original {
color: #00aa00;
white-space: nowrap;
}
#wrapper {z-index: 9;
position: absolute; writing-mode: vertical-lr;white-space: pre; width: 60px;height: 90%;top: 120px; left: 15%;
padding: 0px; display: none;
font-size: 44px;
font-width: 400 ;
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
}
.char {
display: inline-block;
padding: 2px 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards, flash 1s infinite alternate var(--state);
}
@keyframes fadeIn {
to {
transform:scale(1);
opacity: 1;
}
}
@keyframes flash {
to { filter: hue-rotate(360deg)brightness(60%); }
}
#g1,#g2,#fullscreen{border-radius: 2px;position:relative;z-index: 1111;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;
}
#player {position:absolute;top: 60%;z-index: 99;
left: 70%;
width: 250px;
height: 250px;
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);
}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
</style>
<div id="papa">
<div class="ppnnt" ></div>
<div style="position: absolute;top:20px;left:40%;">
<span id="g1" onclick="btn1()"title="竖排歌词">竖排歌词</span>
<span id="g2" onclick="btn2()"title="横排歌词">横排歌词</span>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
</div>
<div class="lantern-con1" style="position: absolute;top:-20px;left:80px;">
<div class="lantern-line1"></div>
<div class="lantern-light1">
<div class="lantern-circle1">
<div class="lantern-rect1">
<div class="lantern-text1">春節</div>
</div>
</div>
<div class="lantern-tassel-top1">
<div class="lantern-tassel-middle"></div>
<div class="lantern-tassel-bottom"></div>
</div>
</div>
</div>
<div class="lantern-con1" style="position: absolute;top:-20px;left:80%;">
<div class="lantern-line1"></div>
<div class="lantern-light1">
<div class="lantern-circle1">
<div class="lantern-rect1">
<div class="lantern-text1">快樂</div>
</div>
</div>
<div class="lantern-tassel-top1">
<div class="lantern-tassel-middle"></div>
<div class="lantern-tassel-bottom"></div>
</div>
</div>
</div>
<input type="checkbox" class="chooseBtn" />
<div class="g-container">
<div class="g-group">
<div class="item item-right"></div>
<div class="item item-left"></div>
<div class="item item-top"></div>
<div class="item item-bottom"></div>
<div class="item item-middle"></div>
</div>
<div class="g-group">
<div class="item item-right"></div>
<div class="item item-left"></div>
<div class="item item-top"></div>
<div class="item item-bottom"></div>
<div class="item item-middle"></div>
</div>
</div>
<div id="wrapper">春节快乐</div>
<div class="lyrics" >
<div class="lyric-line">
<div class="lyric-mask"></div>
<div class="lyric-original"></div>
</div>
</div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>
<audio id="aud" src="https://img4.oldkids.cn/upload/2026/02/11/blog_260857263_20260211194126625.mp3" autoplay loop></audio>
<script >
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
</script >
<script>
const lrc = `欢欢喜喜过大年
歌手：乐洋
作词：岳梦华/乐洋
作曲：乐洋
编曲：乐洋
混缩：乐洋
LRC歌词编辑：明月工作室
火树银花来装点
万里河山换新颜
你乔装来我打扮
欢欢喜喜过大年
锣鼓声声响震天
家家户户展笑颜
你张灯来我结彩
红红火火过大年
火火的灯笼挂门前
春意盎然贺新年
火红的春联贴两边
和和美美福气满园
火火的鞭炮响连天
举杯欢畅贺新年
火红的烟花多灿烂
欢欢喜喜过大年
过新年过大年过一个吉祥年
辞旧迎新大吉大利时来运转
贺新年贺大年贺一个幸福年
财源滚滚步步高升好运连连
火树银花来装点
万里河山换新颜
你乔装来我打扮
欢欢喜喜过大年
锣鼓声声响震天
家家户户展笑颜
你张灯来我结彩
红红火火过大年
火火的灯笼挂门前
春意盎然贺新年
火红的春联贴两边
和和美美福气满园
火火的鞭炮响连天
举杯欢畅贺新年
火红的烟花多灿烂
欢欢喜喜过大年
-- 谢谢欣赏 --
`;
const aud= document.getElementById('aud');
const lyrics = parseLyrics(lrc);
const lyricMask = document.querySelector('.lyric-mask');
const lyricOriginal = document.querySelector('.lyric-original');
let currentIndex = -1;
let currentLyric = null;
// 解析歌词（支持两种格式）
function parseLyrics(lrcText) {
const lyrics = [];
if (lrcText.includes('karaoke.add')) {
const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
let match;
while ((match = lineRegex.exec(lrcText)) !== null) {
const startTime = timeToMs(match);
const endTime = timeToMs(match);
const text = match.replace(/\[|\]/g, '').trim();
const durations = match.split(',').map(Number);
if (text) {
lyrics.push({startTime, endTime, text, durations});
}
}
}
else if (lrcText.includes('[')) {
const lines = lrcText.split('\n').filter(line => line.trim());
lines.forEach((line, index) => {
const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
if (timeMatch) {
const timeStr = timeMatch;
const text = line.replace(/\[.*?\]/, '').trim();
if (text) {
const startTime = timeToMs(timeStr);
const nextLine = lines;
const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
lyrics.push({
startTime,
endTime,
text,
durations: calculateCharDurations(text, startTime, endTime)
});
}
}
});
}
return lyrics;
}
function calculateCharDurations(text, startTime, endTime) {
const totalDuration = endTime - startTime;
const charCount = text.length;
const baseDur = Math.floor(totalDuration / charCount);
const durations = new Array(charCount).fill(baseDur);
const remainder = totalDuration % charCount;
for (let i = 0; i < remainder; i++) {
durations++;
}
return durations;
}
function timeToMs(timeStr) {
const parts = timeStr.split(':');
const minutes = parseInt(parts, 10);
const secondsAndMs = parts.split('.');
const seconds = parseInt(secondsAndMs, 10);
const ms = parseInt(secondsAndMs || 0, 10);
return minutes * 60 * 1000 + seconds * 1000 + ms;
}
function getCurrentLyricIndex(lyrics, currentTimeMs) {
for (let i = 0; i < lyrics.length; i++) {
if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
return i;
}
}
return -1;
}
function updateLyricDisplay(index) {
if (index < 0 || index >= lyrics.length) return;
currentIndex = index;
currentLyric = lyrics;
lyricOriginal.textContent = currentLyric.text;
lyricMask.textContent = currentLyric.text;
lyricMask.style.width = '0%';
}
function updateLyricMask(currentTimeMs) {
if (!currentLyric) return;
const lyricStartTime = currentLyric.startTime;
const elapsed = currentTimeMs - lyricStartTime;
const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
let charIndex = 0;
let accumulatedTime = 0;
for (let i = 0; i < currentLyric.durations.length; i++) {
accumulatedTime += currentLyric.durations;
if (elapsed <= accumulatedTime) {
charIndex = i + 1;
break;
}
}
if (elapsed >= totalDuration) {
charIndex = currentLyric.text.length;
}
charIndex = Math.min(charIndex, currentLyric.text.length);
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.fontSize = '50px';
tempSpan.style.fontWeight = '300';
document.body.appendChild(tempSpan);
const visibleText = currentLyric.text.substring(0, charIndex);
tempSpan.textContent = visibleText;
const width = tempSpan.offsetWidth;
document.body.removeChild(tempSpan);
lyricMask.style.width = `${width}px`;
}
// 监听更新歌词
aud.addEventListener('timeupdate', () => {
const currentTimeMs = aud.currentTime * 1000;
const index = getCurrentLyricIndex(lyrics, currentTimeMs);
if (index !== currentIndex) {
updateLyricDisplay(index);
}
updateLyricMask(currentTimeMs);
});
updateLyricDisplay(0);
const gcAr = lrc2HC(lrc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 600 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 600 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
<script>
var g1=document.getElementById("wrapper");
const g2 = document.querySelector('.lyrics');
function btn1() {
g1.style.display = 'block';
g2.style.display = 'none';
}
function btn2() {
g1.style.display = 'none';
g2.style.display = 'block';
}
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',background.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused',background.style.animationPlayState = 'paused');
</script>
喜庆，好听，祝福亚伦老师除夕快乐，马年大吉{:4_176:} 精彩的制作使花潮的过年气氛更浓了。 欣赏精彩喜庆帖，祝亚伦老师新春快乐，马年大吉！ 祝老师马年大吉，马到成功！ 亚纶这个制作很漂亮哦{:4_178:} 亚纶悠着点玩，新的一年祝福亚纶，吃嘛嘛香倍儿棒！ 祝福亚纶新的一年好运连连，快乐多多，幸福满满！{:4_187:} 红灯笼移到这里很喜庆，亚伦老师的制作很赞。
给亚伦老师拜年了，祝您新春快乐，万事如意{:4_187:} 给老师拜年了，马年吉祥！
喜庆，漂亮的春节贺帖，背景图加闪动变色效果好看{:4_177:} 祝你新年快乐！ 颜值与钱包： 2026马年到，祝你：颜值马上爆表，钱包马上鼓包，烦恼马上滚蛋，对象马上报到！主打一个：想要的全都“马上”有！
页:
[1]