论坛首页 › 单图音画 › 雪落寂静海[图片来自华声论坛]

亚伦影音工作室 发表于 2026-3-20 14:40:00

雪落寂静海[图片来自华声论坛]

本帖最后由 亚伦影音工作室 于 2026-10-15 14:48 编辑 <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: #EEE url(https://pic.3gbizhi.com/uploadmark/20200820/d115907ac26c0e30c1cc0c2379865e25.webp) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
}
#mydiv {
    margin: 0px 0px;
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      background-color: #EEE;
      user-select: none;
      overflow: hidden;
      position: absolute;
      animation: hue-rotate 2s linear infinite;
      z-index: 1;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}

.slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}


#overlay {
position: absolute;
top: -60px;
left: 0;
width: 100%;
height: calc(100% + 80px);
object-fit: cover;
mix-blend-mode: overlay;
opacity: 0.0;
z-index: 50;
pointer-events: none;
}

/* 添加模糊糊到清晰效果样式 */
.blur-to-clear-effect {
animation: blurToClear 1.5s ease-out forwards;
}

@keyframes blurToClear {
from {
    filter: blur(15px);
    opacity: 0;
}
to {
    filter: blur(0);
    opacity: 1;
}
}

#lyric {position: absolute;left: 50%;bottom: 3%;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-size: 3.5em;}
#lyricDisplay{height: 100%;letter-spacing: 0px;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;animation:rotd 0.5s linear infinite}
.lyrichar {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards;margin: 0 2px;}
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}}
@keyframes rotd {to {filter: hue-rotate(360deg);}}
#player{position:absolute;top: 12%;z-index: 99;
            left: 83%;
width: 200px;
height: 200px;
display: grid;
        place-items: center;animation: rot 8s linear infinite ;}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
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);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}

#statusDisplay{position: absolute;z-index: 120;font-size: 1.5em;font-weight: 500;left: 85%;top: 3%;color:#000}

#fullscreen{border-radius: 4px;position: absolute;
color:#000;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 22px;
border: none;
cursor: pointer;top: 5px;left: 3%;
}


</style>

<div id="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id="mydiv">
<div class="slide">
    <img src="https://image.hnol.net/c/2025-10/20/21/20251020211014561-6245755.jpg" alt="图片1">
</div>
<div class="slide">
    <img src="https://image.hnol.net/c/2025-10/20/21/202510202110476471-6245755.jpg" alt="图片2">
</div>
<div class="slide">
    <img src="https://image.hnol.net/c/2025-10/20/21/202510202111563171-6245755.jpg" alt="图片3">
</div>
<div class="slide">
    <img src="https://image.hnol.net/c/2025-10/20/21/202510202112233211-6245755.jpg" alt="图片4">
</div>
    <div class="slide">
      <img src="https://image.hnol.net/c/2025-10/20/21/202510202112502711-6245755.jpg" alt="图片5">
      </div>
      <div class="slide">
      <img src="https://image.hnol.net/c/2025-10/20/21/202510202113134211-6245755.jpg" alt="图片6">
      </div>
      
      </div>
<divid="statusDisplay">播放中: -2:20 </div>

<div id="player">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>

<div id="lyric">
<div id="lyricDisplay" ></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=3330857530.mp3" loop autoplay ></audio>
</div>
       
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const starfishPlayer =document.getElementById('player');
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();

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();
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 = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };

let mState = () => aud.paused ? (mydiv.style.animationPlayState = 'paused',player.style.animationPlayState = 'paused',lyricDisplay.style.animationPlayState = 'paused' ) : (mydiv.style.animationPlayState = 'running',player.style.animationPlayState = 'running',lyricDisplay.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

</script>
<script>
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let timer;

// 只保留模糊到清晰效果
const effects = [
{func: applyBlurToClearEffect}   
];

function init() {
const firstSlide = slides;
effects.func(firstSlide); // 始终使用第一个效果（模糊到清晰）
startTimer();
}

// 清除所有效果
function clearEffects() {
// 移除所有可能的效果类
slides.forEach(slide => {
    slide.style.opacity = '0';
    slide.classList.remove('blur-to-clear-effect');
});
}

function showNext() {if(!aud.paused){
clearEffects();
currentIndex = (currentIndex + 1) % totalSlides;
const currentEffect = effects; // 始终使用第一个效果（模糊到清晰）

const targetSlide = slides;
currentEffect.func(targetSlide);
resetTimer();
}
}

// 模糊到清晰效果
function applyBlurToClearEffect(slide) {
slide.style.opacity = '1';
slide.classList.add('blur-to-clear-effect');
}

function startTimer() {
timer = setInterval(showNext, 4000);
}

function resetTimer() {
clearInterval(timer);
startTimer();
}

window.onload = init;
</script>

klxf 发表于 2026-3-21 00:10:17

制作精致，效果精美，谢谢亚伦老师精彩分享

醉美水芙蓉 发表于 2026-3-21 16:46:20

欣赏亚伦老师精彩播放器！

baimudan 发表于 2026-3-24 00:36:29

支持佳作，风格独具一格

火箭军 发表于 2026-3-26 13:40:38

感谢分享，解决我的疑惑啦

xixixi 发表于 2026-3-29 07:35:34

赞，顶帖真的超有内涵

urajufu 发表于 2026-3-31 07:32:03

赞，顶帖超有借鉴价值

shipinchangwu 发表于 2026-4-5 05:54:25

感谢分享，带来新的灵感

evylo 发表于 2026-4-6 16:52:35

支持发布，内容值得收藏

jiafagai 发表于 2026-4-7 07:51:27

支持发布，内容超有品质

查看完整版本: 雪落寂静海[图片来自华声论坛]