控制动画【方辰 - 你一走心就空】
本帖最后由 亚伦影音工作室 于 2025-11-4 13:32 编辑 <br /><br /><style>#papa {position:relative;width:1286px;height:720px;
margin:10px -300px;box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 6px #880000;overflow:hidden;border-radius:0%;
}
#pBlk {background: url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp)no-repeat center/cover;
width:100%;
height:100%;
position:relative;
margin:auto;
top:0%;
}
#pBlk div {
background-size:1286px 720px;
background-repeat: no-repeat;
float:left;
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
.lyrics-container {font:400 2.4em 华文隶书;
width: 500px;
height: 400px;
overflow: hidden;
position:absolute;
top: 15%;
left: 30%;
filter:drop-shadow(#000 1px 2px 1px);
padding: 20px;
box-sizing: border-box;
z-index: 3;
}
.lyrics-wrapper {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: row-reverse;
height: calc(100% - 40px);
transition: transform 0.5s ease;
}
.lyrics-column {
writing-mode: vertical-rl;
text-orientation: upright;
line-height: 1.2;
margin-left: 8px;
height: 100%;
white-space: nowrap;
opacity: 0;
transform: translateY(280px)translateX(-250px)rotate(100deg)scale(1.2);
transition: opacity 1s, transform 1s;
color: #00ff00 !important;
}
.lyrics-column.active {
opacity: 1;transform:scale(1);
transform: translate(0);
}
.lyrics-column .line {
margin-bottom: 15px;
}
.lyrics-column .line.active {
color: #fff000 !important;
}
</style>
<div id="papa">
<div id='pBlk'></div>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
<div class="lyrics-container">
<div class="lyrics-wrapper" id="lyricsWrapper"></div>
</div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w7/audio/b7/3f/e8/6f0efdb9e4aa6175954763f4437d6378/audio.mp3"loopautoplay ></audio>
<script>
var pics = [
"https://pic1.imgdb.cn/item/686cbd4658cb8da5c8963cfc.webp",
"https://pic1.imgdb.cn/item/68634d9958cb8da5c8811cd6.jpg",
"https://pic1.imgdb.cn/item/686265e358cb8da5c87f8d9b.jpg",
"https://pic1.imgdb.cn/item/6818838658cb8da5c8dd8333.jpg",
"https://pic1.imgdb.cn/item/685cdd5258cb8da5c8724514.jpg",
"https://pic1.imgdb.cn/item/685cd8ee58cb8da5c8722284.jpg",
"https://pic1.imgdb.cn/item/67767b77d0e0a243d4edd967.jpg",
"https://pic1.imgdb.cn/item/67c4289cd0e0a243d40a1450.jpg",
"https://pic1.imgdb.cn/item/683a8ce658cb8da5c81e81d3.jpg",
"https://pic1.imgdb.cn/item/683a8ccf58cb8da5c81e81c2.jpg",
"https://pic1.imgdb.cn/item/683a8cc358cb8da5c81e81b5.jpg",
"https://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.jpg"
];
let bw = pBlk.clientWidth / 15, bh = pBlk.clientHeight / 15;
let picIdx = 0;
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
var oDiv = document.createElement('div');
oDiv.style.backgroundImage = `url(${pics})`;
//oDiv.style.backgroundRepeat = `no-repeat`;
oDiv.style.backgroundPosition = -j * bw + 'px ' + (-i * bh) + 'px';
oDiv.style.width = bw + 'px';
oDiv.style.height = bh + 'px';
oDiv.style.transition = (1 + Math.random()) + 's';
//oDiv.style.float = 'left';
pBlk.appendChild(oDiv);
}
};
var allDiv = pBlk.querySelectorAll('div');
var t = null
let chgPic = () => {
let index = allDiv.length - 1;
picIdx++; picIdx %= pics.length;
t = setInterval(function() {if(!aud.paused){
if (index == -1) {
clearInterval(t);
allDiv.forEach(aDiv => {
aDiv.style.opacity = 1;
aDiv.style.transform = 'translate(0px,0px)'
});
return;
}
allDiv.style.backgroundImage = `url(${pics})`;
allDiv.style.transform = 'translate(0px,200px)';
allDiv.style.opacity = 0;
index--;}
}, 10);
setTimeout(chgPic, 10000);
}
chgPic();
mdiv.onclick = () =>aud.paused ? (aud.play(),'paused',mdiv.style.animationPlayState = 'running') : (aud.pause(),'running',mdiv.style.animationPlayState = 'paused');
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const currentTimeDisplay = document.getElementById('currentTime');
const lyricsWrapper = document.getElementById('lyricsWrapper');
const lyricsContainer = document.querySelector('.lyrics-container');
// LRC歌词数据
const lrc = `一生只爱你一人
演唱:马建涛
春日里吹着暖风阵阵
夏日里一起听蝉鸣声声
秋天看落叶一层层
冬天牵手看大雪纷纷
早出时你送我出门
晚归时你是我归灯
一定是特别的缘分
才让我和你相伴一生
我愿一生借你一程
一程就是你的一生
陪你走过大好青春
陪你看遍人间每个黄昏
我愿问你的一生借一程
用我一生去爱你一人
年少时和你细数星辰
老了我就陪你 数皱纹
早出时你送我出门
晚归时你是我归灯
一定是特别的缘分
才让我和你相伴一生
我愿一生借你一程
一程就是你的一生
陪你走过大好青春
陪你看遍人间每个黄昏
我愿问你的一生借一程
用我一生去爱你一人
年少时 和你细数星辰
老了我就陪你 数皱纹
我愿一生借你一程
一程就是你的一生
陪你走过大好青春
陪你看遍人间每个黄昏
我愿问你的一生借一程
用我一生去爱 你一人
年少时 和你细数星辰
老了我就陪你 数皱纹
老了我就陪你 数皱纹
`;
// 解析LRC歌词
function parseLRC(lrcText) {
const lines = lrcText.split('\n');
const result = [];
for (const line of lines) {
const timeMatch = line.match(/^\[(\d+):(\d+)\.(\d+)\](.*)/);
if (timeMatch) {
const minutes = parseInt(timeMatch);
const seconds = parseInt(timeMatch);
const hundredths = parseInt(timeMatch);
const text = timeMatch.trim();
const time = minutes * 60 + seconds + hundredths / 100;
result.push({ time, text });
}
}
return result;
}
const lyrics = parseLRC(lrc);
let currentLyricIndex = 0;
// 创建新歌词列
function createNewLyricsColumn(text) {
const column = document.createElement('div');
column.className = 'lyrics-column';
const line = document.createElement('div');
line.className = 'line';
line.textContent = text;
column.appendChild(line);
lyricsWrapper.insertBefore(column, lyricsWrapper.firstChild);
// 激活列动画
setTimeout(() => {
column.classList.add('active');
}, 100);
// 激活行高亮
setTimeout(() => {
line.classList.add('active');
}, 500);
return column;
}
// 计算容器能容纳多少列
function calculateMaxColumns() {
const containerWidth = lyricsContainer.clientWidth - 40;
const columnWidth = 30;
return Math.floor(containerWidth / columnWidth);
}
let maxColumns = calculateMaxColumns();
window.addEventListener('resize', function() {
maxColumns = calculateMaxColumns();
});
// 显示歌词
function displayLyric(text) {
// 创建新列
const newColumn = createNewLyricsColumn(text);
// 如果列数超过最大值，移除最左边的列
if (lyricsWrapper.children.length > maxColumns) {
const lastColumn = lyricsWrapper.lastChild;
lastColumn.style.opacity = '0';
lastColumn.style.transform = 'translateX(20px)';
// 动画结束后移除
setTimeout(() => {
lyricsWrapper.removeChild(lastColumn);
}, 500);
}
}
// 重置歌词显示
function resetLyrics() {
lyricsWrapper.innerHTML = '';
currentLyricIndex = 0;
}
// 更新进度条和时间显示（使用负数递减模式）
audio.addEventListener('timeupdate', function() {
const currentTime = aud.currentTime;
const duration = aud.duration || 1;
// 更新进度条(已隐藏）
const remainingTime = duration - currentTime;
currentTimeDisplay.textContent = `-${formatTime(remainingTime)}`;
while (currentLyricIndex < lyrics.length && currentTime >= lyrics.time) {
displayLyric(lyrics.text);
currentLyricIndex++;
}
});
// 音频开始播放时重置歌词
audio.addEventListener('play', function() {
if (audio.currentTime === 0) {
resetLyrics();
}
});
// 格式化时间显示
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
});
</script>
孤独的我孤独的灯
孤独的夜晚想你发了疯
痴情的梦我痴情的等
痴情的心啊没有你心疼
花开匆匆花落也匆匆
我爱的你消失在人海中
酒杯好空我泪水好汹
可我的无奈你从来不懂
你一走啊心就空我一想你心就痛
那么爱你你却给我一场梦
酒一醉啊情失控风一吹眼泪汹涌
月亮她笑我夜夜眼红
你一走啊心就空我一想你心就痛
那么爱你你却像是一阵风
夜一深啊愁更浓雨一落回忆翻涌
隔着人海我又盼重逢
花开匆匆花落也匆匆
我爱的你消失在人海中
酒杯好空我泪水好汹
可我的无奈你从来不懂
你一走啊心就空我一想你心就痛
那么爱你你却给我一场梦
酒一醉啊情失控风一吹眼泪汹涌
月亮她笑我夜夜眼红
你一走啊心就空我一想你心就痛
那么爱你你却像是一阵风
夜一深啊愁更浓雨一落回忆翻涌
隔着人海我又盼重逢
你一走啊心就空我一想你心就痛
那么爱你你却给我一场梦
酒一醉啊情失控风一吹眼泪汹涌
月亮她笑我夜夜眼红
你一走啊心就空我一想你心就痛
那么爱你你却像是一阵风
夜一深啊愁更浓雨一落回忆翻涌
隔着人海我又盼重逢 音画唯美 制作大气 太棒啦~玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】 背景音乐好听！我听的都醉了！ 个人建议：播放器加上歌曲名字和歌词同步就更锦上添花！ 感谢支持花潮论坛，辛苦了，祝亚伦和家人岁岁安康，幸福吉祥！ 《落花吟》这张图与主题有点偏离了？ 欣赏佳作，问候亚伦。 偶然~ 发表于 2025-11-3 10:32
个人建议：播放器加上歌曲名字和歌词同步就更锦上添花！
只是初稿，等待中！ 亚伦影音工作室 发表于 2025-11-3 11:43
只是初稿，等待中！
{:4_180:} 很奇特的图片轮播方式，打散重组，小播也漂亮。
欣赏亚伦老师好帖{:4_187:} 漂亮~谢谢亚伦老师精彩分享{:4_191:} 佳作连连，点赞！
页:
[1]