论坛 › 欢乐水吧 › 展开熨平岁月疤

亚伦影音工作室 发表于 2026-6-30 18:21

展开熨平岁月疤

本帖最后由 亚伦影音工作室 于 2026-6-30 18:21 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
:root {--ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #fff887;--color-2: #fc89e5;--color-3: #fd27d2;--color-4: #9cf9fc;--color-5: #0dd7de;--color-6: #fbcb6d;--color-7: #fb8739;--color-8: #fa5f57;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8;}
#papa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1260px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background:url(https://pic1.imgdb.cn/item/6a2d5bf8f684928e3d6ab816.png) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
       #tp {margin: 0px0px;
      width: 100%;
      height:100%;
      position: absolute;
background:linear-gradient(180deg, rgba(255, 0, 0, 0) 90%, rgba(8, 8, 13, 0.98)100%),url(https://pic1.imgdb.cn/item/6a438f26514f59159c64efe4.png)no-repeat center/cover;

animation: hue-rotate 2s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
.filtered-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 55% 100%, 53% 0, 72% 0, 50% 100%, 100% 100%, 100% 0%);
background:linear-gradient(180deg, rgba(255, 0, 0, 0) 90%, rgba(8, 8, 13, 0.98)100%),url(https://pic1.imgdb.cn/item/6a438f26514f59159c64efe4.png)no-repeat center/cover;
filter: url("#turbulence")
}
#lyric {position: absolute;left: 25%;bottom: 45%;transform: translateX(-50%);z-index: 12;display: flex;flex-direction: column;justify-content: center;height: 160px;width: 80%;text-align: center;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);font:3.5em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#lyricDisplay{height: 100%;letter-spacing: 0px;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;}
.lyrichar {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards,hue-rotate 1.5s linear infinite;margin: 0 2px;}
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}}
@keyframes hue-rotate {50%{ filter: hue-rotate(360deg); }}
.stop .lyrichar{animation-play-state: paused;}
#bnt{left: 10px;bottom: 10px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer; }
#bnt:hover { mask: unset; }
#pic{position:absolute;top:25px; left:28px;background:#fff;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:22px;
      height: 22px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#fff; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:22px;
      height: 22px}
#tmsg {position:absolute; z-index: 4;
      font: normal 13px sans-serif;
      color: #fff;
         bottom: 28px;
      left:64%;}
#prog {position:absolute;z-index: 40;
      width: 58%;
      height: 4px;background:#fff;
      cursor: pointer;
         bottom: 32px;border-radius: 20px;
left:5%;
}
#prog-bar {
            height: 100%;
            background: #ff6500;
            width: 0%;border-radius: 20px;
      }
      
   #dt{z-index: 40;
      position:absolute;
      width: 35px;
      height: 34px;filter:invert(0%);
      bottom: 16px;border-radius: 0px;
   left: 72%;
      cursor: pointer;
    }
#mutedbnt{z-index: 40;
   width: 25px;
      height: 24px;
      filter:invert(0%);
   left: 0%;
      cursor: pointer;
    }

#volumeSlider{bottom: 42px;left: 75%;z-index: 40;
             position:absolute;
         width: 17%; height: 3px;border-radius: 20px;

}
input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 4 10 4 0 / 0px 0px 0 2000px;
}

#loopbnt{z-index: 40;
      position:absolute;
      width: 22px;filter:invert(100%);
      height: 18px;background:#0000;
      bottom: 25px;border-radius: 0px;
   right: 60px;
      cursor: pointer;
    }   
      
#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 300;left: 12%;top: 11%;color:#000}

#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px;   bottom:26px; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id='tp'><div class="filtered-background"></div></div>
<svgid="reflect" >
<filter id="turbulence" x="0%" y="0%" width="100%" height="100%" >
    <feTurbulence id="ripples" numOctaves="6" seed="6" baseFrequency="0.02 0.05"></feTurbulence>
    <feDisplacementMap scale="8" in="SourceGraphic"></feDisplacementMap>
      <animate xlink:href="#ripples" attributeName="baseFrequency" dur="30s" keyTimes="0;0.5;1"
values="0.02 0.05;
      0.04 0.07;
      0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>


<divid="statusDisplay">播放中: -2:20 </div>

<div id="bnt">
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="tmsg">00:00|00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"><div class="now"></div></div></div>
<div id="dt">
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif"id="mutedbnt" onClick="pc()"/>
</div>
<inputtype="range" min="0.1" max="1" step="0.1" value="0.8" id="volumeSlider" >
<br>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
<div id="testImg" >
<div id="lyric">
<div id="lyricDisplay" ></div>
</div>
</div>
<audio id="aud"src="https://aod.cos.tx.xmcdn.com/storages/a0dd-audiofreehighqps/42/31/GKwRIJENwb4lABy5QgSPpjgm.m4a" loop autoplay ></audio>
</div>
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const starfishPlayer =document.getElementById('bnt');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');

let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let isMuted = true;
let fsTimer = null;
let sparkleInterval = null;
function createSingleSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
const x = Math.random() * 100;
const y = Math.random() * 100;
sparkle.style.left = `${x}%`;
sparkle.style.top = `${y}%`;
sparkle.style.animationDelay = `${Math.random() * 2}s`;
sparkle.style.setProperty('--tx', `${(Math.random() - 0.5) * 80}px`);
sparkle.style.setProperty('--ty', `${(Math.random() - 0.5) * 80}px`);
sparklesContainer.appendChild(sparkle);
setTimeout(() => {
if (sparkle && !sparkle.classList.contains('hidden')) {
sparkle.remove();
}
}, 3000);
}
function startSparkleLoop() {
stopSparkleLoop();
sparklesContainer.classList.remove('fade-out');
sparklesContainer.style.opacity = 1;
sparklesContainer.innerHTML = '';
for (let i = 0; i < 15; i++) {
createSingleSparkle();
}
sparkleInterval = setInterval(() => {
if (window.isPlaying) {
createSingleSparkle();
}
}, 500);
}
function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}
function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(sparkle => {
sparkle.classList.add('hidden');
});
setTimeout(() => {
sparklesContainer.innerHTML = '';
}, 800);
}
function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}
function togglePlayPause() {
if (audioPlayer.paused) {
if (audioPlayer.currentTime <= 0.5) {
resetLyrics();
}
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '播放中...';
startSparkleLoop();
})
.catch(error => {
console.error('播放失败:', error);
statusDisplay.textContent = '播放失败，请检查音频文件';
});
} else {
audioPlayer.pause();
document.getElementById('testImg').classList.add('stop') ;
window.isPlaying = false;
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
statusDisplay.textContent = '已暂停';
fadeOutAllSparkles();
}
}
audioPlayer.addEventListener('play', () => {
animatedGif.classList.add('active');
staticImage.classList.remove('active');
});
audioPlayer.addEventListener('pause', () => {
staticImage.classList.add('active');
animatedGif.classList.remove('active');
});
starfishPlayer.addEventListener('click', (e) => {
e.stopPropagation();
document.getElementById('testImg').classList.remove('stop');
togglePlayPause();
});
function displayLyricCharByChar(text) {
lyricDisplay.innerHTML = '';
const chars = text.split('');
const colorList = ['var(--color-1)', 'var(--color-2)', 'var(--color-3)', 'var(--color-4)', 'var(--color-5)', 'var(--color-6)'];
chars.forEach((char, i) => {
const span = document.createElement('span');
span.className = 'lyrichar';
span.style.color = colorList;
if (char === ' ') {
span.innerHTML = '&nbsp;';
} else {
span.textContent = char;
}
const offset = i === 0 ? 0 : i * 30;
span.style.transform = `translateY(${offset}px)`;
span.style.animationDelay = `${i * 0.08}s`;
if (/[，。！？,.!?]/.test(char)) {
span.style.animationDelay = `${i * 0.08 + 0.08}s`;
}
lyricDisplay.appendChild(span);
});
}
audioPlayer.addEventListener('timeupdate', () => {
if (!window.isPlaying) return;
if (isUpdating) return;
isUpdating = true;
setTimeout(() => isUpdating = false, 100);
const currentTime = audioPlayer.currentTime;
const remainingTime = audioPlayer.duration - currentTime;
statusDisplay.textContent = `播放中: ${formatTime(-remainingTime)}`;
for (let i = 0; i < lyrics.length; i++) {
const currentLyricTime = lyrics.time;
const nextLyricTime = i < lyrics.length - 1 ? lyrics.time : Infinity;
if (currentTime >= currentLyricTime - 0.3 && currentTime < nextLyricTime + 0.3) {
if (currentLyricIndex !== i) {
currentLyricIndex = i;
displayLyricCharByChar(lyrics.text);
}
break;
}
}
});
function formatTime(seconds) {
const absSeconds = Math.abs(seconds);
const mins = Math.floor(absSeconds / 60);
const secs = Math.floor(absSeconds % 60);
const sign = seconds < 0 ? '-' : '';
return `${sign}${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
const lrcText = `
展开熨平岁月疤
作词：陆光星
作曲：陆光星
别总绷着脸 眉头拧成疙瘩
笑一笑模样 立马就不差
挺直那腰杆 别被生活压垮
日子有精神 步步都潇洒
心里别藏事 闷着多难受啊
敞开心扉说 烦恼全放下
人活着一世 图个自在通透
心宽路就宽 福气往家扒
脸蛋多舒展 顺眼又顺滑
腰板挺起来 浑身有劲儿啊
心扉敞开来 万事都开花
敢往前迈步 好运跟着咱
用幸福当熨斗 熨平岁月疙瘩
人生那些褶皱 慢慢都捋顺啦
揣着爱和欢喜 带着满脸笑啊
一辈子暖洋洋 活出精彩年华
谁都有难事 难免心里乱扒拉
别钻牛角尖 别跟自己找茬
大胆去奔赴 想要的风光如画
只管往前闯 啥坎儿都能跨
简单过日子 轻松活咱当下
看淡烦心事 快乐常驻脸颊
真心待生活 生活就善待咱
日子越舒展 幸福越安家
脸蛋多舒展 顺眼又顺滑
腰板挺起来 浑身有劲儿啊
心扉敞开来 万事都开花
敢往前迈步 好运跟着咱
用幸福当熨斗 熨平岁月疙瘩
人生那些褶皱 慢慢都捋顺啦
揣着爱和欢喜 带着满脸笑啊
一辈子暖洋洋 活出精彩年华
敞开脸 挺直腰 放宽心呐
平平顺顺 幸福到白发

`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const lrcRegex = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
lines.forEach(line => {
const match = line.match(lrcRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const ms = parseInt(match);
const totalSeconds = minutes * 60 + seconds + ms / 100;
const text = match.trim();
lyrics.push({
time: totalSeconds,
text: text
});
}
});
return lyrics;
}
const lyrics = parseLrc(lrcText);
audioPlayer.addEventListener('ended', () => {
resetLyrics();
starfishPlayer.classList.remove('playing');

starfishPlayer.classList.add('paused');

statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});
audioPlayer.addEventListener('loadedmetadata', () => {
statusDisplay.textContent = '音频已加载，点击播放开始';
tryAutoPlay();
});

audioPlayer.addEventListener('error', (e) => {
console.error('音频错误:', e);
statusDisplay.textContent = '音频加载失败，请检查文件路径';
});
function tryAutoPlay() {
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '音乐加载中...';
startSparkleLoop();
})
}
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script>
<script>


let mState = () => aud.paused ? (picc.style.opacity = '1',pic.style.opacity = '0',image.stop(),reflect.pauseAnimations(),tp.style.animationPlayState = 'paused') : (picc.style.opacity= '0',pic.style.opacity = '1',image.play(),reflect.unpauseAnimations(),tp.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

/*进度条 进度时间*/
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');


aud.addEventListener('timeupdate', () => {
          varpercent= (aud.currentTime / aud.duration) * 100;
            progBar.style.width = percent + '%';
let p = (coordEnd - coordStart) / this.offsetWidth
   
      });

aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});


let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
/*结束*/
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
            function pc() {
var img = document.getElementById("mutedbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif") {aud.muted= true;
img.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png"; volumeSlider.value=0;
} else {aud.muted= false;volumeSlider.value=0.8;
img.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";}
}


function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      //
      var width = this.width, height = this.height;
      if (width && height) {
            // 洢
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvasС
            canvas.width = width;
            canvas.height = height;
            //
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            //
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                //
                this.removeAttribute('src');
                // canvas
                canvas.style.position = 'absolute';
                //
                this.parentElement.insertBefore(canvas, this);
                //
                this.style.opacity = '0';
                // 洢canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image= document.getElementById("mutedbnt");
</script>

小辣椒 发表于 2026-6-30 20:54

亚纶你的背景图片太大了，你压缩一下出来速度会快多了，

小辣椒 发表于 2026-6-30 20:54

欣赏亚纶精彩的制作{:4_187:}

红影 发表于 2026-6-30 21:40

漂亮的水波纹效果和变色效果。
欣赏亚伦老师好帖{:4_187:}

杨帆 发表于 2026-6-30 23:16

制作精美，效果漂亮，欣赏学习亚伦老师美帖{:4_190:}

查看完整版本: 展开熨平岁月疤