没有留住你的温柔
本帖最后由 亚伦影音工作室 于 2025-11-18 18:24 编辑 <br /><br /><style>#papa{position: relative;
width: 1286px;
height: 720px;
margin-left: -300px;
margin-top: 10px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
overflow: hidden;z-index:12345;
background:url(https://pic1.imgdb.cn/item/671af491d29ded1a8c8e7c58.jpg)no-repeat center/cover;
}
.wrap {
position: absolute;
width: 1200px;
height: 360px;
margin: 180px 10px;
}
.content {list-style: none;
position: absolute;
width: 1200px;
height: 360px;
}
.content li{box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
position: absolute;
background-size: 100% 100%;
}
#lyrics-container {
position: absolute;
width: 80%;
height: 50%;left:0%;
top: 62%;
}
.lyric-line {
position: absolute;
white-space: nowrap;
opacity: 0;
transform: scale(0.1);
transition: transform 3s, opacity 0.8s, color 4s;
text-align: center;
left:10%;
top: 20%;
z-index: 10;
font: 50 30px '华文隶书', sans-serif;
margin-left: -200px;
margin-top: -40px;
filter: drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);
}
#audio-controls {
position: fixed;
bottom: 20px;
z-index: 100;
display: none;
}
#spectrum-container {
position: absolute;
width: 1100px;
height: 640px;
top: 40px;
left: 50px;
pointer-events: none;
z-index: 5;
}
.butterfly {
position: absolute;
width: 30px;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
transform-origin: center;
transition: transform 0.1s;
}
#progress-container {
position: absolute;
left: 551px;
top: 41px;
transform: translateX(-50%);
width: 120px;
height: 120px;
z-index: 100;
}
#progress-circle {
fill: transparent;
stroke: #880000;
stroke-width: 5;
stroke-dasharray: 339.6;
stroke-dashoffset: 339.6;
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.1s linear;
}
#progress-bg {
fill: transparent;
stroke: rgba(255,255,255,0.2);
stroke-width: 5;
}
#rotating-image {
position: absolute;
left: 500px;
top: 50px;
width: 102px;
height: 102px;
border-radius: 50%;
object-fit: cover;
z-index: 101;
transform-origin: center;
transition: transform 0.1s linear;
cursor: pointer;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
#rotating-image.playing {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 5px rgba(255, 105, 180, 0.7); }
50% { box-shadow: 0 0 20px rgba(255, 105, 180, 0.9); }
100% { box-shadow: 0 0 5px rgba(255, 105, 180, 0.7); }
}
</style>
<divid="papa">
<div class="wrap" id="wrap">
<p class="content"></p>
</div>
<div id="lyrics-container"></div>
<div id="spectrum-container"></div>
<div id="audio-controls">
<audio id="audio-player" crossOrigin="anonymous"controls>
<source src="https://s2.ananas.chaoxing.com/sv-w9/audio/3f/6c/bb/ebbc00eb82fe17d4820033d8278bcd58/audio.mp3" type="audio/mpeg">
</audio>
</div>
<img id="rotating-image" src="https://pic1.imgdb.cn/item/690c41ba3203f7be00db7fed.png" width="102" height="102">
<!-- 圆形进度条 -->
<div id="progress-container">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle id="progress-bg" cx="60" cy="60" r="54" />
<circle id="progress-circle" cx="60" cy="60" r="54" />
</svg>
</div>
</div>
<script>
window.onload=function(){
var imgArr=[
{"path":"https://pic1.imgdb.cn/item/67715fb8d0e0a243d4ec337e.png"},
{"path":"https://pic1.imgdb.cn/item/67c4289cd0e0a243d40a1450.jpg"},
{"path":"https://pic1.imgdb.cn/item/6862641f58cb8da5c87f852b.jpg"},
{"path":"https://pic1.imgdb.cn/item/68537fb258cb8da5c85a91ce.jpg"},
{"path":"https://pic1.imgdb.cn/item/683a8ce658cb8da5c81e81d3.jpg"},
{"path":"https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg"},
{"path":"https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg"}
];
var size=[
{"top":60,"left":0,"width":400,"height":240,"zIndex":1,"opacity":0},
{"top":60,"left":0,"width":400,"height":240,"zIndex":2,"opacity":40},
{"top":30,"left":150,"width":500,"height":300,"zIndex":3,"opacity":70},
{"top":0,"left":300,"width":600,"height":360,"zIndex":4,"opacity":100},
{"top":30,"left":550,"width":500,"height":300,"zIndex":3,"opacity":70},
{"top":60,"left":800,"width":400,"height":240,"zIndex":2,"opacity":40},
{"top":60,"left":800,"width":400,"height":240,"zIndex":1,"opacity":0}
];
var imgSum=imgArr.length;
var wrap=document.getElementById('wrap');
var cont=wrap.firstElementChild || wrap.firstChild;
var btnArr=wrap.getElementsByTagName('a');
var falg=true;
var speed=2000;
wrap.onmouseover=function(){
for (var i=0;i<btnArr.length;i++) {
btnArr.style.display='block';
}
clearInterval(wrap.timer);
}
wrap.onmouseout=function(){
for (var i=0;i<btnArr.length;i++) {
btnArr.style.display='none';
}
wrap.timer=setInterval(function(){
move(true);
},speed);
}
for (var i=0;i<imgSum;i++) {
var lis=document.createElement('li');
// lis.style.cssText='top:'+size.top+'px;'+'left:'+size.left+'px;'+'width:'+size.width+'px;'+'z-index:'+size.zIndex+';'+'height:'
// +size.height+'px;'+'opacity:'+size.opacity+';';
lis.style.backgroundImage='url('+imgArr.path+')';
cont.appendChild(lis);
}
var liArr=cont.children;
move();
wrap.timer=setInterval(function(){
move(true);
},speed);
btnArr.onclick=function(){
if (falg) {
move(true);
}
}
btnArr.onclick=function(){
if (falg) {
move(false);
}
}
function move(bool){
if(bool!=undefined){
if(bool){
size.unshift(size.pop());
}else {
size.push(size.shift());
}
}
for (var i=0;i<liArr.length;i++) {
animate(liArr,size,function(){
falg=true;
});
}
}
}
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle : window.getComputedStyle(obj,null);
}
function animate(obj,json,fn){
clearInterval(obj.timer);
if(!audioPlayer.paused)obj.timer=setInterval(function(){ var bool=true;
for(var k in json){
var leader;
if (k=='opacity') {
if (getStyle(obj,k)==undefined) {
leader=100;
}else {
leader=parseInt(getStyle(obj,k)*150);
}
}else {
leader=parseInt(getStyle(obj,k)) || 0;
}
var step=(json-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
if(k=='zIndex'){
obj.style=json;
}else if(k=='opacity'){
obj.style=leader/100;
obj.style.filter='alpha(opacity='+leader+')';
}else {
obj.style=leader+'px';
}
if(json!=leader){
bool=false;
}
}
if(bool){
clearInterval(obj.timer);
if (fn) {
fn();
}
}
},10);
}
//尽量使用标准LRC格式歌词
const lrcLyrics = `没有留住你的温柔
枫叶抵不过冷冷的秋
誓言经不起岁月的等候
黄昏的路口你在哪头
我一个人等了很久很久
风雨过后熙攘的人流
再也看不见你笑着挥手
仿佛我还在梦里停留
停留在和你相遇的时候
我没有留住你的温柔
我也不敢打扰你的追求
绿荫中不能和你牵着手
没有理由说天长地久
我没有留住你的温柔
我也不忍再看你的眼眸
让风带去我对你的问候
留下我一个人的自由
风雨过后熙攘的人流
再也看不见你笑着挥手
仿佛我还在梦里停留
停留在和你相遇的时候
我没有留住你的温柔
我也不敢打扰你的追求
绿荫中不能和你牵着手
没有理由说天长地久
我没有留住你的温柔
我也不忍再看你的眼眸
让风带去我对你的问候
留下我一个人的自由
我没有留住你的温柔
我也不敢打扰你的追求
绿荫中不能和你牵着手
没有理由说天长地久
我没有留住你的温柔
我也不忍再看你的眼眸
让风带去我对你的问候
留下我一个人的自由
`;
// 采用鲜艳的颜色数组，更符合春暖花开主题
const colors = [
'#FF1493', '#FF69B4', '#FF6347', '#FFA500',
'#FFD700', '#90EE90', '#00FA9A', '#00FF7F',
'#7CFC00', '#ADFF2F', '#32CD32', '#00FF00',
'#FF00FF', '#DA70D6', '#BA55D3', '#9370DB',
'#FF4500', '#FF8C00', '#FFD700', '#FF0000'
];
// 解析LRC歌词
function parseLRC(lrcText) {
const lines = lrcText.split('\n');
const result = [];
for (const line of lines) {
// 匹配时间标签
const timeMatch = line.match(/\[(\d{2}):(\d{2})\.(\d{2})\]/);
if (!timeMatch) continue;
const minutes = parseFloat(timeMatch);
const seconds = parseFloat(timeMatch);
const hundredths = parseFloat(timeMatch) / 100;
const time = minutes * 60 + seconds + hundredths;
// 获取歌词文本
const text = line.replace(timeMatch, '').trim();
if (text) {
result.push({ time, text });
}
}
return result;
}
const lyrics = parseLRC(lrcLyrics);
const container = document.getElementById('lyrics-container');
const spectrumContainer = document.getElementById('spectrum-container');
const audioPlayer = document.getElementById('audio-player');
const rotatingImage = document.getElementById('rotating-image');
const progressCircle = document.getElementById('progress-circle');
let currentLineIndex = 0;
let lyricElements = [];
let hasPlayedOnce = false;
let audioContext;
let analyser;
let dataArray;
let butterflies = [];
let animationId;
let progressInterval;
let rotationAngle = 0;
let rotationInterval;
let isPlaying = false;
// 创建蝴蝶频谱
function createButterflies() {
const butterflySVG = `
<svg viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 0 L -100 -200 Q 0 -40 40 -200 L 0 0 M 0 0 L 159.31 -156.909 Q 38.042 -12.361 202.572 -23.761 L 0 0 M 0 0 L 198.459 103.025 Q 23.511 32.361 85.196 185.315 L 0 0 M 0 0 L -36.655 220.582 Q -23.511 32.361 -149.918 138.292 L 0 0 M 0 0 L -221.113 33.302 Q -38.042 -12.361 -177.851 -99.846 L 0 0 Z" fill="#ff0000"/>
<path d="M 0 0 L -100 -200 Q 0 -40 40 -200 L 0 0 M 0 0 L 159.31 -156.909 Q 38.042 -12.361 202.572 -23.761 L 0 0 M 0 0 L 198.459 103.025 Q 23.511 32.361 85.196 185.315 L 0 0 M 0 0 L -36.655 220.582 Q -23.511 32.361 -149.918 138.292 L 0 0 M 0 0 L -221.113 33.302 Q -38.042 -12.361 -177.851 -99.846 L 0 0 Z" fill="#0000" stroke="#ff0000" stroke-width="2"/>
<path d="M 0 0 L -100 -200 Q 0 -40 40 -200 L 0 0 M 0 0 L 159.31 -156.909 Q 38.042 -12.361 202.572 -23.761 L 0 0 M 0 0 L 198.459 103.025 Q 23.511 32.361 85.196 185.315 L 0 0 M 0 0 L -36.655 220.582 Q -23.511 32.361 -149.918 138.292 L 0 0 M 0 0 L -221.113 33.302 Q -38.042 -12.361 -177.851 -99.846 L 0 0 Z" fill="#0000" stroke="#ff0000" stroke-width="2"/>
</svg>
`;
for (let i = 0; i < 20; i++) {
const butterfly = document.createElement('div');
butterfly.className = 'butterfly';
butterfly.style.backgroundImage = `url("data:image/svg+xml;utf8,${encodeURIComponent(butterflySVG)}")`;
butterfly.style.left = `${Math.random() * 100}%`;
butterfly.style.top = `${Math.random() * 100}%`;
butterfly.style.opacity = '0.7';
butterfly.style.transform = `scale(${0.5 + Math.random() * 0.5}) rotate(${Math.random() * 360}deg)`;
spectrumContainer.appendChild(butterfly);
butterflies.push({
element: butterfly,
x: Math.random(),
y: Math.random(),
speed: 0.1 + Math.random() * 0.2,
angle: Math.random() * Math.PI * 2,
size: 0.5 + Math.random() * 0.5,
baseSize: 0.5 + Math.random() * 0.5,
targetX: Math.random(),
targetY: Math.random(),
targetSize: 0.5 + Math.random() * 0.5,
frequencyBand: Math.floor(Math.random() * 32)
});
}
}
// 初始化音频分析器
function initAudioAnalyzer() {
try {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createMediaElementSource(audioPlayer);
analyser = audioContext.createAnalyser();
analyser.fftSize = 64;
source.connect(analyser);
analyser.connect(audioContext.destination);
dataArray = new Uint8Array(analyser.frequencyBinCount);
console.log('音频分析器初始化成功');
if (!animationId) {
updateButterflies();
}
} catch (e) {
console.error('音频分析器初始化失败:', e);
}
}
// 更新蝴蝶动画
function updateButterflies() {
if (!analyser) {
animationId = requestAnimationFrame(updateButterflies);
return;
}
analyser.getByteFrequencyData(dataArray);
let volume = 0;
for (let i = 0; i < dataArray.length; i++) {
volume += dataArray;
}
volume = volume / dataArray.length / 255;
butterflies.forEach((butterfly, index) => {
const intensity = dataArray / 255;
butterfly.targetSize = butterfly.baseSize * (1 + intensity * 1.2 + volume * 0.3);
butterfly.size += (butterfly.targetSize - butterfly.size) * 0.05;
if (Math.random() < 0.005 || intensity > 0.5) {
butterfly.angle = Math.random() * Math.PI * 2;
}
const moveIntensity = 0.003 * butterfly.speed * (1 + intensity * 1.5 + volume * 0.3);
butterfly.x += Math.cos(butterfly.angle) * moveIntensity;
butterfly.y += Math.sin(butterfly.angle) * moveIntensity;
if (butterfly.x < 0) {
butterfly.x = 1;
butterfly.angle = Math.random() * Math.PI * 2;
}
if (butterfly.x > 1) {
butterfly.x = 0;
butterfly.angle = Math.random() * Math.PI * 2;
}
if (butterfly.y < 0) {
butterfly.y = 1;
butterfly.angle = Math.random() * Math.PI * 2;
}
if (butterfly.y > 1) {
butterfly.y = 0;
butterfly.angle = Math.random() * Math.PI * 2;
}
butterfly.element.style.left = `${butterfly.x * 100}%`;
butterfly.element.style.top = `${butterfly.y * 100}%`;
const rotation = (butterfly.angle * 180 / Math.PI) + (intensity * 90) + (index % 2 === 0 ? 1 : -1) * (volume * 45);
butterfly.element.style.transform = `scale(${butterfly.size}) rotate(${rotation}deg)`;
butterfly.element.style.opacity = `${0.5 + intensity * 0.4}`;
const hue = (index * 15 + Date.now() * 0.0005 * (1 + volume)) % 360;
butterfly.element.style.filter = `hue-rotate(${hue}deg) saturate(${1 + volume * 1.5})`;
});
animationId = requestAnimationFrame(updateButterflies);
}
// 预创建所有歌词元素
function createLyricElements() {
lyrics.forEach((line, index) => {
const element = document.createElement('div');
element.className = 'lyric-line';
element.textContent = line.text;
element.style.color = colors;
element.style.left = '66%';
element.style.top = '53%';
element.style.marginLeft = '-200px';
element.style.marginTop = '-50px';
container.appendChild(element);
lyricElements.push(element);
});
}
// 显示歌词行
function showLyricLine(index) {
if (index >= lyricElements.length) return;
const element = lyricElements;
element.style.transform = 'scale(0.1)';
element.style.opacity = '0';
setTimeout(() => {
element.style.transition = 'transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s, color 2s';
element.style.transform = 'scale(1.5)';
element.style.opacity = '1'
let colorIndex = index % colors.length;
const colorChangeInterval = setInterval(() => {
colorIndex = (colorIndex + 1) % colors.length;
element.style.color = colors;
}, 2000);
setTimeout(() => {
element.style.transition = 'transform 3s, opacity 5s';
element.style.transform = 'scale(0.8) translateY(-180px)';
element.style.opacity = '0';
clearInterval(colorChangeInterval);
setTimeout(() => {
element.style.transition = 'none';
}, 1000);
}, 3000);
}, 100);
}
// 重置歌词状态
function resetLyrics() {
currentLineIndex = 0;
lyricElements.forEach(el => {
el.style.opacity = '0';
el.style.transform = 'scale(0.1)';
el.style.transition = 'none';
});
}
// 更新歌词
function updateLyrics() {
const currentTime = audioPlayer.currentTime;
if (currentLineIndex < lyrics.length && currentTime >= lyrics.time) {
showLyricLine(currentLineIndex);
currentLineIndex++;
}
if (currentTime < lyrics.time && currentLineIndex > 0) {
resetLyrics();
}
}
// 更新进度条
function updateProgress() {
const progress = (audioPlayer.currentTime / audioPlayer.duration) || 0;
const circumference = 339.6; // 2πr (r=54) 放大20%
const offset = circumference - (progress * circumference);
progressCircle.style.strokeDashoffset = offset;
}
// 旋转图片
function rotateImage() {
if (isPlaying) {
rotationAngle += 0.5;
rotatingImage.style.transform = `rotate(${rotationAngle}deg)`;
}
}
function startAllAnimations() {
isPlaying = true;
rotatingImage.classList.add('playing');
progressInterval = setInterval(updateProgress, 100);
rotationInterval = setInterval(rotateImage, 20);
}
function stopAllAnimations() {
isPlaying = false;
clearInterval(progressInterval);
clearInterval(rotationInterval);
rotatingImage.classList.remove('playing');
}
// 初始化函数
function init() {
createLyricElements();
createButterflies();
const togglePlayback = () => {
if (audioPlayer.paused) {
if (!audioContext) {
initAudioAnalyzer();
}
audioPlayer.play().then(() => {
startAllAnimations();
hasPlayedOnce = true;
}).catch(e => {
console.log('播放失败:', e);
});
} else {
audioPlayer.pause();
stopAllAnimations();
}
};
// 旋转图片点击事件
rotatingImage.addEventListener('click', togglePlayback);
audioPlayer.addEventListener('timeupdate', updateLyrics);
audioPlayer.addEventListener('ended', function() {
resetLyrics();
stopAllAnimations();
});
audioPlayer.addEventListener('pause', function() {
stopAllAnimations();
});
// 播放时恢复动画
audioPlayer.addEventListener('play', function() {
startAllAnimations();
if (!animationId) {
updateButterflies();
}
if (!analyser) {
initAudioAnalyzer();
}
});
// 尝试自动播放
const tryAutoPlay = () => {
if (!hasPlayedOnce) {
togglePlayback();
}
};
// 页面加载后尝试自动播放
tryAutoPlay();
// 如果自动播放失败，在用户点击时再次尝试
document.addEventListener('click', tryAutoPlay);
}
// 启动应用
window.addEventListener('load', init);
</script> 这里漂亮的粒子，当音乐进行时就快速转动着，暂停时它们仍然漂浮着，但变小了也安静了。
很神奇的粒子效果。{:4_187:} 哦，原来小播的转动也是疯狂的{:4_173:}
图片轮播也很漂亮，欣赏亚伦老师好帖{:4_199:} 漂亮~谢谢亚伦老师精彩分享{:4_191:} 音画唯美 制作大气 歌声唯美动听 感谢亚伦带来的精彩，辛苦了！祝你开心幸福、阖家安康！
页:
[1]