《昙花一现》- 学习马老师帖代码

杨帆发表于 2025-7-31 22:08

本帖最后由杨帆于 2025-8-2 08:21 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>昙花一现 - 何晟铭</title>
</head>
<body>
<style>
#pa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; user-select: none; position: relative; overflow: hidden; --per: 0%; --state: paused;z-index: 1; }
.slide-container { position: absolute; width: 100%; height: 100%; }
.slide-img { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 1; }
.fragment { position: absolute; background-size: cover; background-position: center; transition: all 0.8s cubic-bezier(0.17, 0.67, 0.83, 0.67); }
.text-container { position: absolute; right: 6%; top: 50.5%; transform: translateY(-50%); writing-mode: vertical-rl; z-index: 10; }
.text { display: inline-block; margin: 20px 0; font: bold 45px 'STHeiti Light', sans-serif; color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); animation-play-state: running; }
.ani { animation: circle 2s linear forwards, flash 1s; }
@keyframes circle { to { transform: rotate(360deg); } }
@keyframes flash { to { color: #7FFF00; opacity: .8; } }
#lrc { --state: paused; --motion: cover2; --tt: 2s; --bg: linear-gradient(0deg, #ff0, #ff0, #ff0); position: absolute; z-index: 6; left: 50%; top: 10%; transform: translate(-50%, -50%); font: bold 2.8em YouYuan; color: #fff; white-space: pre-wrap; width: 80%; text-align: center; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); }
#lrc::before { content: attr(data-lrc); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre-wrap; background: var(--bg); clip-path: inset(0 100% 0 0); -webkit-background-clip: text; background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { to { clip-path: inset(0 0 0 0); text-shadow: 0 0 10px #0f0; } }
@keyframes cover2 { to { clip-path: inset(0 0 0 0); text-shadow: 0 0 10px #ff0; } }
.loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; z-index: 20; }
#player { position: absolute; right: 2%; top: 82%; width: 120px; height: 120px; animation: rot 8s linear infinite var(--state); --state: running; border-radius: 50%; transition: transform 0.3s ease; opacity: 0;z-index: 10; }
#pa:hover #player{ position: absolute;opacity: .8;}
#player:hover { transform: scale(1.05); filter: drop-shadow(0 0 80px Gold); }
@keyframes rot { to { transform: rotate(360deg); } }
#ma { position: absolute; top: 30%; left: 80%; width: 398px; height: 398px; z-index: 10; transform: scale(1); }
#ma:hover .son { transform: unset; }
.son { --angle: 0; position: absolute; background: url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat var(--x1) var(--y1); transform: rotate(var(--angle)) translate(50px); transition: 2s; }
   #pa::before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: url('https://pic1.imgdb.cn/item/688c5c1058cb8da5c8f77e1f.jpg') no-repeat center/cover; clip-path: polygon(0 100%,calc(50% - var(--per))100%,calc(50% - var(--per)) 0,0 0); transition: 2s; z-index: 10; }
   #pa::after {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: url('https://pic1.imgdb.cn/item/688c5c1058cb8da5c8f77e1f.jpg') no-repeat center/cover; clip-path: polygon(calc(50% + var(--per)) 100%,100% 100%,100% 0,calc(50% + var(--per)) 0); transition: 2s; z-index: 10; }
#pa:hover { --per: 50%; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .6; pointer-events: none; z-index: 1; }
#fullscreen { position: absolute; left: 20px; bottom: 20px; color: #eee; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.5em华文新魏; opacity: 0; cursor: pointer;z-index: 10;}
#fullscreen:hover { transform:scale(1.05);font-style: italic; }
#pa:hover #fullscreen{ opacity: .8;}
</style>
<div id="pa">
<div class="slide-container"></div>
<div class="text-container"></div>
<div data-lrc="" id="lrc"></div>
<div class="loader"></div>
<span id="fullscreen">全屏欣赏</span>
<div id="ma"></div>
<img id="player" src="https://pic1.imgdb.cn/item/688c8eee58cb8da5c8f95285.png" alt="" />
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/03/11/34/video636563e6dc5bc.mp4" autoplay loop muted></video>
<audio id="aud" src="https://upfile.mp3.wf/view.php/31c89237eadb6e69f72cd9b7b328eb0d.mp3"loop></audio></div>
<script>
const state = {
   isPaused: false,
   carouselTimer: null,
   currentIndex: 0,
   isAnimating: false
};

const aud = document.getElementById('aud');
const pa = document.getElementById('pa');
const slideContainer = document.querySelector('.slide-container');
const textContainer = document.querySelector('.text-container');
const loader = document.querySelector('.loader');

const imgs = [
   "https://pic1.imgdb.cn/item/688a377658cb8da5c8f1ef4d.png",
   "https://pic1.imgdb.cn/item/688a37a858cb8da5c8f1ef85.png",
   "https://pic1.imgdb.cn/item/688a37c758cb8da5c8f1efa7.png",
   "https://pic1.imgdb.cn/item/688a37e558cb8da5c8f1efc8.png"
];

function initImages() {
   imgs.forEach((src, index) => {
         const img = document.createElement('div');
         img.className = `slide-img ${index === 0 ? 'active' : ''}`;
         img.style.backgroundImage = `url(${src})`;
         img.style.zIndex = index === 0 ? 1 : 0;
         slideContainer.appendChild(img);
   });
   hideLoader();
   startCarousel();
}

function startCarousel() {
   clearInterval(state.carouselTimer);
   state.carouselTimer = setInterval(() => {
         if (state.isPaused || state.isAnimating) return;
         nextSlide();
   }, 5000);
}

function createFragments(imgElement) {
   document.querySelectorAll('.fragment').forEach(f => f.remove());
   const fragmentCount = 3;
   const width = imgElement.offsetWidth;
   const height = imgElement.offsetHeight;
   const fragmentWidth = width / fragmentCount;
   const fragmentHeight = height / fragmentCount;
   const imgSrc = imgElement.style.backgroundImage;

   for (let i = 0; i < fragmentCount; i++) {
         for (let j = 0; j < fragmentCount; j++) {
            const fragment = document.createElement('div');
            fragment.className = 'fragment';
            fragment.style.width = `${fragmentWidth}px`;
            fragment.style.height = `${fragmentHeight}px`;
            fragment.style.left = `${j * fragmentWidth}px`;
            fragment.style.top = `${i * fragmentHeight}px`;
            fragment.style.backgroundImage = imgSrc;
            fragment.style.backgroundPosition = `-${j * fragmentWidth}px -${i * fragmentHeight}px`;
            fragment.style.zIndex = 2;
            pa.appendChild(fragment);
         }
   }

   return document.querySelectorAll('.fragment');
}

function nextSlide() {
   if (state.isAnimating) return;
   state.isAnimating = true;

   const slides = document.querySelectorAll('.slide-img');
   const currentImg = slides;
   const fragments = createFragments(currentImg);

   setTimeout(() => {
         fragments.forEach(fragment => {
            fragment.style.transform = `perspective(800px)
               rotateX(${Math.random() * 360 - 180}deg)
               rotateY(${Math.random() * 360 - 180}deg)
               translateZ(${Math.random() * 400 - 200}px)`;
            fragment.style.opacity = 0;
         });
   }, 100);

   setTimeout(() => {
         currentImg.style.zIndex = 0;
         currentImg.style.opacity = 0;

         state.currentIndex = (state.currentIndex + 1) % imgs.length;
         const nextImg = slides;
         nextImg.style.zIndex = 1;
         nextImg.style.opacity = 1;

         setTimeout(() => {
            document.querySelectorAll('.fragment').forEach(f => f.remove());
            state.isAnimating = false;
         }, 500);
   }, 800);
}

function hideLoader() {
   loader.style.display = 'none';
}

player.onmousemove = (e) => {
         player.title = '播放/暂停';
         player.style.cursor = 'pointer';
   };
player.onclick = () => {
aud.paused ? (aud.play(),vid.play()) : (aud.pause(),vid.pause());
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');

const ma = document.getElementById('ma');
if (aud.paused) {
   ma.style.opacity = '0';
   ma.style.transition = 'opacity 0.5s ease';
} else {
   ma.style.opacity = '1';
   ma.style.transition = 'opacity 0.5s ease';
}
};

function syncState() {
   state.isPaused = aud.paused;
   lrc.style.setProperty('--state', state.isPaused ? 'paused' : 'running');
   document.querySelectorAll('.text').forEach(el => {
         el.style.animationPlayState = state.isPaused ? 'paused' : 'running';
   });
}

const txtAr = '昙花一现'.split('');
let spans = [];

txtAr.forEach((t, k) => {
   const s = document.createElement('span');
   s.textContent = t;
   s.className = k === 0 ? 'text ani' : 'text';
   spans.push(s);
   textContainer.appendChild(s);

   s.onanimationend = () => {
         if (state.isPaused) return;
         s.classList.remove('ani');
         spans[(k + 1) % txtAr.length].classList.add('ani');
   };
});

(function() {
   const lrcStr = `
昙花一现 - 何晟铭 (Mikey He)
词：何晟铭
曲：谭旋
从清晨到夜幕在梦里似糊涂
色即是空空即是色
从年少到鬓白一切看似模糊
没有到有有到没有
过着今生想着来世注定因为前世
爱都爱了恨也恨了还要轮回几次
我在天地尽头寻找今生的遗漏
一生的逗留只求一眼海市蜃楼
爱恨一念之间定格过往流年
就算昙花一现只为最美瞬间
从清晨到夜幕在梦里似糊涂
色即是空空即是色
从年少到鬓白一切看似模糊
没有到有有到没有
过着今生想着来世注定因为前世
爱都爱了恨也恨了还要轮回几次
我在天地尽头寻找今生的遗漏
一生的逗留只求一眼海市蜃楼
爱恨一念之间定格过往流年
就算昙花一现只为最美瞬间
我在天地尽头寻找今生的遗漏
一生的逗留只求一眼海市蜃楼
爱恨一念之间定格过往流年
就算昙花一现只为最美瞬间
`;

   let mKey = 0, mFlag = true, averAdd = 0.3;
   let lrcAr = [];
   const lrc = document.getElementById('lrc');

   const lrcTime = (ar) => {
         const tmpAr = [];
         for (let j = 0; j < ar.length - 1; j++) {
            tmpAr = parseFloat((ar - ar).toFixed(1));
         }
         const aver = (tmpAr.reduce((a, b) => a + b, 0) / (tmpAr.length || 1)) + averAdd;
         tmpAr.push(aver);
         tmpAr.forEach((item, key) => {
            ar = item > aver ? aver : item;
         });
         return ar;
   };

   const getLrcAr = (text) => {
         const lrcAr = [];
         const calcRule = ;
         for (const x of text.split('\n')) {
            let line = x.replace(/\[.*?\]/g, '').trim();
            if (!line) continue;

            const timeMatch = x.match(/\[(\d+):(\d+\.\d+)\]/);
            if (!timeMatch) continue;
            const minutes = parseInt(timeMatch);
            const seconds = parseFloat(timeMatch);
            const totalSeconds = parseFloat((minutes * 60 + seconds).toFixed(2));

            lrcAr.push();
         }
         return lrcTime(lrcAr.sort((a, b) => a - b));
   };

   const showLrc = (time) => {
         if (mKey >= lrcAr.length) mKey = 0;
         const name = mFlag ? 'cover1' : 'cover2';
         lrc.innerHTML = lrcAr;
         lrc.dataset.lrc = lrcAr;
         lrc.style.setProperty('--motion', name);
         lrc.style.setProperty('--tt', time + 's');
         lrc.style.setProperty('--state', state.isPaused ? 'paused' : 'running');
         mKey++;
         mFlag = !mFlag;
   };

   const calcKey = () => {
         for (let j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
               mKey = j - 1;
               break;
            }
         }
         mKey = Math.max(0, Math.min(mKey, lrcAr.length - 1));
         const time = lrcAr - (aud.currentTime - lrcAr);
         showLrc(time > 0 ? time : lrcAr);
   };

   aud.addEventListener('timeupdate', () => {
         if (state.isPaused) return;
         for (let j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr && mKey === j) {
               showLrc(lrcAr);
               break;
            }
         }
   });

   aud.addEventListener('pause', syncState);
   aud.addEventListener('play', syncState);
   aud.addEventListener('seeked', calcKey);

   lrcAr = getLrcAr(lrcStr);
   aud.addEventListener('loadedmetadata', () => {
         calcKey();
   });
})();

window.addEventListener('load', () => {
   let loadedCount = 0;
   imgs.forEach(src => {
         const img = new Image();
         img.onload = () => {
            loadedCount++;
            if (loadedCount === imgs.length) {
               initImages();
            }
         };
         img.src = src;
   });
});

const rows = 8, cols = 8, size = 398;
const ww = size / cols, hh = size / rows;
for (let j = 0; j < rows; j ++) {
   for (let k = 0; k < cols; k ++) {
         const son = document.createElement('div');
         son.className = 'son';
         son.style.cssText += `
            width: ${ww}px;
            height: ${hh}px;
            left: ${k * ww}px;
            top: ${j * hh}px;
            --x1: ${-1 * k * ww}px;
            --y1: ${-1 * j * hh}px;
            --angle: ${360 * Math.random()}deg;
         `;
         ma.appendChild(son);
   }
}

let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏',pa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
            fs = !fs;
   };

</script>
</body>
</html>

红影发表于 2025-7-31 23:07

底图加载有点慢，等了一会，底图还是轮播图，每个轮播还是碎裂出去的。
小播的使用有点奇怪，咋弄了两个{:4_173:}

杨帆发表于 2025-7-31 23:18

本帖最后由杨帆于 2025-7-31 23:28 编辑

红影发表于 2025-7-31 23:07
底图加载有点慢，等了一会，底图还是轮播图，每个轮播还是碎裂出去的。
小播的使用有点奇怪，咋弄了两个{: ...
我这儿的加载速度还行呀

标题上面的图只起修饰作用并没小播功能

下面一个图才是小播呦{:4_173:}

红影发表于 2025-8-1 11:25

杨帆发表于 2025-7-31 23:18
我这儿的加载速度还行呀

标题上面的图只起修饰作用并没小播功能

打开过的加载就快了，我现在再看就很快呢。
这个制作还是很漂亮的，用了那么多的效果，给杨帆点赞{:4_199:}

杨帆发表于 2025-8-1 12:55

红影发表于 2025-8-1 11:25
打开过的加载就快了，我现在再看就很快呢。
这个制作还是很漂亮的，用了那么多的效果，给杨帆点赞{:4_19 ...

好，谢谢影子鼓励，主要是尝试学习{:4_171:}

红影发表于 2025-8-1 18:57

杨帆发表于 2025-8-1 12:55
好，谢谢影子鼓励，主要是尝试学习

杨帆厉害，你好像总是弄很多效果在一起呢，很不容易{:4_187:}

杨帆发表于 2025-8-1 19:00

红影发表于 2025-8-1 18:57
杨帆厉害，你好像总是弄很多效果在一起呢，很不容易

谢谢影子鼓励，鼓捣着玩呢{:4_171:}

红影发表于 2025-8-1 20:16

杨帆发表于 2025-8-1 19:00
谢谢影子鼓励，鼓捣着玩呢

这个玩得很有水平呢{:4_187:}

梦江南 发表于 2025-8-2 09:05

这么好的帖子差点错过了。
背景图的特效非常漂亮，这也是用代码做的啊，杨帆厉害！{:4_187:}

梦江南 发表于 2025-8-2 09:11

这昙花是您家里的吧，是自己拍的照片？

杨帆发表于 2025-8-2 09:42

梦江南发表于 2025-8-2 09:11
这昙花是您家里的吧，是自己拍的照片？

问好江南，谢谢鼓励，是一个朋友拍的他家的{:4_171:}

杨帆发表于 2025-8-2 09:44

梦江南发表于 2025-8-2 09:05
这么好的帖子差点错过了。
背景图的特效非常漂亮，这也是用代码做的啊，杨帆厉害！

谢谢江南鼓励，鼓捣着玩呢

页: [1]

花潮论坛's Archiver

《昙花一现》- 学习马老师帖代码