心态好则事事好 - 学习亚伦老师帖代码 - 欢乐水吧 - 花潮论坛

杨帆发表于 2025-7-23 20:07

心态好则事事好 - 学习亚伦老师帖代码

本帖最后由杨帆于 2025-7-23 20:51 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>心态好则事事好（DJ版）- 文心</title>
</head>
<body>
<style>
#papa {
margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/6880c8fd58cb8da5c8d0e7a6.jpg') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #ccc, 0px 0px 0px 2px #fff; position: relative; overflow: hidden;user-select: none; z-index: 1;
}
#wallpaper {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: background-image 1s ease-in-out;
}
.fade {
animation: fadeEffect 3s forwards;
}
@keyframes fadeEffect {
from { opacity: 0; }
50% { opacity: 1; }
to { opacity: 1; }
}
.slide-left {
animation: slideLeftEffect 3s forwards;
}
@keyframes slideLeftEffect {
from { transform: translateX(100%); }
50% { transform: translateX(0); }
to { transform: translateX(0); }
}
.slide-right {
animation: slideRightEffect 3s forwards;
}
@keyframes slideRightEffect {
from { transform: translateX(-100%); }
50% { transform: translateX(0); }
to { transform: translateX(0); }
}
.photo {
animation: round 3s forwards;
}
@keyframes round {
0% { opacity: 1; transform: translate(0%, 0%) scale(0) rotate(360deg); }
50% { opacity: 1; transform: translate(0%, 0%) scale(1); }
100% { opacity: 1; transform: translate(0%, 0%) scale(1); }
}
.huid {
animation: yuoyu 3s forwards;
}
@keyframes yuoyu {
0% { opacity: 1; clip-path: ellipse(0% 00% at 50% 50%); }
30% { opacity: 1; clip-path: ellipse(50% 50% at 50% 50%); }
60% { opacity: 1; clip-path: ellipse(100% 100% at 50% 50%); }
100% { opacity: 1; clip-path: ellipse(100% 100% at 50% 50%); }
}
.guid {
animation: guoyu 3s forwards;
}
@keyframes guoyu {
0% { opacity: 1; clip-path: circle(0 at 50% 100%); }
50% { opacity: 1; clip-path: circle(100% at 50% 100%); }
100% { opacity: 1; clip-path: circle(100% 100% at 50% 50%); }
}
.wguid {
animation: wguoyu 3s forwards;
}
@keyframes wguoyu {
0% { opacity: 1; clip-path: circle(0% at 130% 50%); }
50% { opacity: 1; clip-path: circle(100% at 50% 100%); }
100% { opacity: 1; clip-path: circle(100% 100% at 50% 50%); }
}
.wmuid {
animation: wmuoyu 3s forwards;
}
@keyframes wmuoyu {
0% { opacity: 1; transform: scale(0.8) scale3d(0, 0, -300) skew(0, 70deg); }
50% { opacity: 1; transform: scale(1); }
100% { opacity: 1; transform: scale(1); }
}
#lrc, #lrcc {
--state: paused; --motion: cover2; --tt: 2s; --bg: linear-gradient(89deg, #EE0000 12%, #078504 35%, #060344 65%, #DE0000 90%); border: 0px solid black; position: absolute; z-index: 6; font: normal 3.2em 华文新魏; color: #222222; white-space: pre; -webkit-background-clip: text; filter: drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0); z-index: 15;
}
#lrc {
left: 10%; top: 75%;
}
#lrcc {
left: 90%; transform: translate(-102%); top: 85%;
}
#lrcc::before, #lrc::before {
position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-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); }
}
@keyframes cover2 {
to { clip-path: inset(0 0 0 0); }
}
#papa:hover #mplayer {
transition: 0.7s; opacity: 0.9;
}
#mplayer {
position: absolute; left: calc(92% - 15px); top: 92%; width: 40px; height: 40px; border: 2px solid #000; box-shadow: 0 0px 0px 6px #ccc; background: #ccc; border-radius: 50%; z-index: 8; opacity: 0; transition: 0.7s; display: grid; place-items: center; --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute; content: ''; border-style: solid; border-color: #000; cursor: pointer; transition: 0.4s;
}
#mplayer::before {
width: 0; height: 0; left: 15px; border-width: 10px 12px; border-color: transparent transparent transparent #000; opacity: var(--disp1);
}
#mplayer::after {
width: 2px; height: 20px; border-width: 0 4px 0 4px; opacity: var(--disp2);
}
#fullscreen {
position: absolute; top: 92%; left: 5%; color: #ffffff; filter: drop-shadow(1px 1px 1px #000000); font: normal 1.8em 华文新魏; opacity: 0; cursor: pointer; z-index: 6;
}
#papa:hover #fullscreen {
transition: 0.7s; opacity: 0.9;
}
#vid1, #vid2 {
position: absolute; width: 100%; height: 120%; top: -10%; object-fit: cover; mix-blend-mode: screen; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; z-index: 2; opacity: 0.95; transition: 0.1s all ease;
}
</style>
<div id="papa">
<div id="wallpaper"></div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/6b5f5f7380ec0955d8e283eb2b729d36.mp3" loop autoplay></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<video id="vid1"src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/54/04/video6364003c5d4ef.mp4" muted autoplay></video>
<video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/03/11/34/video636563e6dc5bc.mp4" autoplay loop muted></video>
<span id="fullscreen">全屏</span>
<div id="mplayer"></div>
</div>
<script>
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

wallpaper.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wallpaper.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wallpaper.style.animationPlayState = 'paused');

})();

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

(function() {let vid = document.querySelector('vid1','vid2');
let mState = () => aud.paused ?(vid1.pause(),vid2.pause()):(vid1.play(),vid2.play());
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);})();
</script>
<script>
   const wallpaper = document.getElementById('wallpaper');
   const images = [
         'url(https://pic1.imgdb.cn/item/6880c91a58cb8da5c8d0e844.jpg)',
         'url(https://pic1.imgdb.cn/item/6880c92f58cb8da5c8d0e89a.jpg)',
         'url(https://pic1.imgdb.cn/item/6880c94358cb8da5c8d0e8fb.jpg)',
         'url(https://pic1.imgdb.cn/item/6880c95958cb8da5c8d0e959.jpg)',
         'url(https://pic1.imgdb.cn/item/6880c96d58cb8da5c8d0e997.jpg)',
         'url(https://pic1.imgdb.cn/item/6880c95958cb8da5c8d0e959.jpg)',

         // 添加更多图片路径
   ];
   let currentIndex = 0;
   const effects = ['fade', 'slide-left', 'slide-right', 'photo', 'huid', 'guid', 'wguid', 'wmuid']; // 转场效果列表

   function changeWallpaper() {
   currentIndex = (currentIndex + 1) % images.length;
         const effect = effects; // 随机选择一个转场效果
         wallpaper.classList.remove(...effects); // 移除所有可能的类名
         wallpaper.classList.add(effect); // 添加新的转场效果类名
         wallpaper.style.backgroundImage = images;
   }

   setInterval(changeWallpaper, 5000); // 每5秒切换一次壁纸
</script>
<span id="lrcStr" style="visibility: hidden;">
心态好则事事好（DJ版）- 文心
夜晚常常回顾一天的过往
为自己的点滴进步而鼓掌表扬
那些小小的成就也是光芒
证明我在爱自己的路上正启航
不羡慕别人只专注自己成长
让生活充满爱处处有希望
看着镜子里熟悉又陌生的我
眼中有了不一样的光彩闪烁
我开始欣赏自己的所有模样
优点和缺点都是我的宝藏收藏
好好爱自己世界才美丽
用爱浇灌内心绽放出绚丽
给自己拥抱给自己鼓励
让快乐围绕烦恼都远离
好好爱自己世界才美丽
珍惜独一无二的自己多不易
带着爱前行生活满诗意
夜晚常常回顾一天的过往
为自己的点滴进步而鼓掌表扬
那些小小的成就也是光芒
证明我在爱自己的路上正启航
不羡慕别人只专注自己成长
让生活充满爱处处有希望
看着镜子里熟悉又陌生的我
眼中有了不一样的光彩闪烁
我开始欣赏自己的所有模样
优点和缺点都是我的宝藏收藏
好好爱自己世界才美丽
用爱浇灌内心绽放出绚丽
给自己拥抱给自己鼓励
让快乐围绕烦恼都远离
好好爱自己世界才美丽
珍惜独一无二的自己多不易
带着爱前行生活满诗意
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let arr="";
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

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

红影发表于 2025-7-23 20:15

好听的歌曲，珍惜自己世界才会变得更美丽。制作也漂亮。
欣赏杨帆好帖{:4_199:}

杨帆发表于 2025-7-23 20:58

红影发表于 2025-7-23 20:15
好听的歌曲，珍惜自己世界才会变得更美丽。制作也漂亮。
欣赏杨帆好帖

谢谢影子鼓励，让生活充满爱处处有希望{:4_187:}

红影发表于 2025-7-23 21:04

杨帆发表于 2025-7-23 20:58
谢谢影子鼓励，让生活充满爱处处有希望

看到杨帆的这句，忽然想起看到过的一句话：“把自己活成一道光，因为你不知道谁会借助这道光走出黑暗。请相信自己的力量，因为你不知道谁会因为相信你而相信自己”

杨帆发表于 2025-7-23 22:27

红影发表于 2025-7-23 21:04
看到杨帆的这句，忽然想起看到过的一句话：“把自己活成一道光，因为你不知道谁会借助这道光走出黑暗。请 ...

是的，很有道理{:4_171:}

红影发表于 2025-7-23 22:36

杨帆发表于 2025-7-23 22:27
是的，很有道理

很喜欢这样的话{:4_187:}

梦江南 发表于 2025-7-24 10:06

很喜欢这歌词里的歌词：心态好则事事好，为自己的点滴进步而鼓掌表扬，不羡慕别人只专注自己成长，
让生活充满爱处处有希望......{:4_187:}

梦江南 发表于 2025-7-24 10:08

问好杨帆，谢谢精彩分享。学习了。{:4_199:}

杨帆发表于 2025-7-24 11:38

梦江南发表于 2025-7-24 10:08
问好杨帆，谢谢精彩分享。学习了。

问好江南，谢谢鼓励，祝开心天天{:4_204:}

梦江南 发表于 2025-7-24 11:45

杨帆发表于 2025-7-24 11:38
问好江南，谢谢鼓励，祝开心天天

这帖子的图片转场用360才能看到，很漂亮。

页: [1]

花潮论坛's Archiver

心态好则事事好 - 学习亚伦老师帖代码