论坛 › 欢乐水吧 › 人间真的值得来这一趟

杨帆 发表于 2025-2-20 12:34

人间真的值得来这一趟

本帖最后由 杨帆 于 2025-2-20 15:33 编辑 <br /><br /><style>
#papa { margin: 130px 0 20px calc(50% - 721px); background: #000 url(https://638183.freep.cn/638183/t24/webp2/hrxl.webp)no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; perspective: 4000px;}
#papa:hover #backface { display: inline-block; }
#mplayer { position: absolute;left: 43%; top: 10%; width: 200px; height: 450px; transform-style: preserve-3d; display: grid;place-item: center; animation: rot 20s linear infinite var(--state); z-index: 6;}
#mplayer:hover { --state: paused; }
.image { position: absolute;z-index: 6;width: 100%; height: 100%; border-radius: 8px; filter: drop-shadow(2px 2px 20px #000); cursor: pointer; transition: .7s; backface-visibility: var(--showbackface); transform: rotateY(var(--deg)) translateZ(300px); }
.image:hover { transform: rotateY(var(--deg)) translateZ(300px) scale(1.2); }
#backface { position: absolute; bottom: 50px; right: 400px; border-radius: 6px; cursor: pointer; display: none; }
@keyframes rot { to { transform: rotateY(360deg); } }
#ppm{position: absolute; width: 100%; height: 100%; opacity:.5; z-index: 1; background:url(https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif) no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;
background:url(https://)no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;
}
#but{left: 1%;bottom: 10px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;
             border-radius: 0%;cursor: pointer;}
#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
#prog {position: absolute;z-index: 8;
      width: 80%;
      height: 2px;background:#ccc;
      cursor: pointer;
         bottom: 35px;
left:5%;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #FF0000;
            width: 0%;
      }
#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ffffff;
         bottom: 28px;
      left:86%;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 26px; cursor: pointer;left:94%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover;
</style>
<style>
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 16;left: 50%;bottom: 80px;transform: translate(-50%);font:400 2.8em/1em 华文行楷;font-style:normal; color: #000080;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 -1px0);}
#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); } }
</style>
<div id="papa"><div id="mplayer"><div class="image"></div>
</div>
<div id="ppm"></div>
<div id="ppcm" ></div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="but"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg"></div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="aud" src="https://cccimg.com/view.php/d47d9f46356c567be664d957358d55ce.mp3" autoplay loop></audio>
<script >
but.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '.4'): (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '.4',ppm.style.opacity = '0');
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;
      };

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 fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

(function() {
/*lrc*/
let lrcStr = `
平凡日子泛着光
作词：未子夫
作曲：灰色幽默
编曲：行者孙
混音：边策
制作人：未子夫
监制：灰色幽默
出品：不二指南
就向前走不需要回望
就去远方看山川海洋
就把伤口都藏在过往
对自己说我很不一样
生活难免有些小风浪
夜深难免有点小沮丧
希望你秉持你的天真善良
一生心有所向热烈地生长
要相信平凡日子一样可以泛着光
要相信美好正在奔你而来的路上
要相信风雨之后天空一定有暖阳
人间真的值得来这一趟
要相信平凡日子一样可以泛着光
要相信总有束花是因为你而开放
要相信念念不忘某天一定有回响
别慌太阳下山有月光
生活难免有些小风浪
夜深难免有点小沮丧
希望你秉持你的天真善良
一生心有所向热烈地生长
要相信平凡日子一样可以泛着光
要相信美好正在奔你而来的路上
要相信风雨之后天空一定有暖阳
人间真的值得来这一趟
要相信平凡日子一样可以泛着光
要相信总有束花是因为你而开放
要相信念念不忘某天一定有回响
别慌太阳下山有月光
要相信平凡日子一样可以泛着光
要相信美好正在奔你而来的路上
要相信风雨之后天空一定有暖阳
人间真的值得来这一趟
要相信平凡日子一样可以泛着光
要相信总有束花是因为你而开放
要相信念念不忘某天一定有回响
别慌太阳下山有月光

`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, 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 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) => {
        let 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', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*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 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;
}

/* л*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.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); /**/
})();
var mState = () => {mplayer.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '.4'): (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '.4',ppm.style.opacity = '0');
        papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        mplayer.title = aud.paused ? '点击播放' : '点击暂停';
};
var pics = [
        'https://pic1.imgdb.cn/item/67950c7ad0e0a243d4f7f759.gif)',
'https://pic1.imgdb.cn/item/67950c7bd0e0a243d4f7f75a.gif',
'https://pic1.imgdb.cn/item/67950c7bd0e0a243d4f7f75b.gif',
'https://pic1.imgdb.cn/item/67950c7bd0e0a243d4f7f75c.gif',
'https://pic1.imgdb.cn/item/67950d02d0e0a243d4f7f76b.gif',
'https://pic1.imgdb.cn/item/67950d02d0e0a243d4f7f76c.gif',
'https://pic1.imgdb.cn/item/67950d02d0e0a243d4f7f76d.gif',
'https://pic1.imgdb.cn/item/67950d03d0e0a243d4f7f76e.gif',
'https://pic1.imgdb.cn/item/67950d03d0e0a243d4f7f76f.gif',
];
Array.from({length: pics.length}).forEach((img,key) => {
        img = document.createElement('img');
        img.className = 'image';
        img.style.cssText += `--deg: ${key * 360 / pics.length}deg`;
        img.src = pics;
        mplayer.appendChild(img);
});
aud.onpause = aud.onplaying = () => mState();
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
backface.onclick = () => {
        if(backface.value === '隐藏背面') {
                papa.style.setProperty('--showbackface', 'hidden');
                backface.value = '显示背面';
        }else{
                papa.style.setProperty('--showbackface', 'visible');
                backface.value = '隐藏背面';
        }
};
papa.scrollIntoView(true);
</script>

起个网名好难 发表于 2025-2-20 13:06

https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif

这么多美女确实值得{:5_117:}

杨帆 发表于 2025-2-20 14:31

本帖最后由 杨帆 于 2025-2-20 16:07 编辑

gif图的效果怎么没了呢？网页或源码都不行！

不过，终于在难难老师指导、帮助下搞定了{:4_191:}

起个网名好难 发表于 2025-2-20 14:59

杨帆 发表于 2025-2-20 14:31
gif图的效果怎么没了呢？网页或源码都不行！

不支持　ｈｔｔｐ

起个网名好难 发表于 2025-2-20 15:03

杨帆 发表于 2025-2-20 14:31
gif图的效果怎么没了呢？网页或源码都不行！
至少在这必须是HTTPS是，可网可以。

杨帆 发表于 2025-2-20 15:12

起个网名好难 发表于 2025-2-20 15:03
至少在这必须是HTTPS是，可网可以。

换了一个可以显示了，长见识了，谢谢老师{:4_190:}

梦江南 发表于 2025-2-20 15:17

厉害啊，还加了歌词。学习了！{:4_199:}

杨帆 发表于 2025-2-20 15:19

梦江南 发表于 2025-2-20 15:17
厉害啊，还加了歌词。学习了！

瞎鼓捣呢，谢谢梦江南朋友支持与鼓励{:4_204:}

梦江南 发表于 2025-2-20 16:06

杨帆 发表于 2025-2-20 15:19
瞎鼓捣呢，谢谢梦江南朋友支持与鼓励

图片有10张呢。{:4_187:}

杨帆 发表于 2025-2-20 16:09

梦江南 发表于 2025-2-20 16:06
图片有10张呢。

是啊，用的已有的旧图

小文 发表于 2025-2-20 17:27

喜欢！问好

杨帆 发表于 2025-2-20 17:34

小文 发表于 2025-2-20 17:27
喜欢！问好

谢谢小文朋友支持与鼓励{:4_191:}

红影 发表于 2025-2-20 19:27

这剪纸美女真漂亮，背景制作也漂亮。
欣赏杨帆好帖{:4_199:}

杨帆 发表于 2025-2-20 19:31

红影 发表于 2025-2-20 19:27
这剪纸美女真漂亮，背景制作也漂亮。
欣赏杨帆好帖

谢谢影子支持与鼓励{:4_204:}

红影 发表于 2025-2-20 20:30

杨帆 发表于 2025-2-20 19:31
谢谢影子支持与鼓励

应该谢谢你带来的精彩好帖才是{:4_187:}

小辣椒 发表于 2025-2-21 23:28

杨帆这个图片转换效果漂亮哦{:4_199:}

小辣椒 发表于 2025-2-21 23:28

用了亚纶的播放器效果{:4_199:}

小辣椒 发表于 2025-2-21 23:29

感谢精彩分享{:4_187:}

杨帆 发表于 2025-2-22 00:43

本帖最后由 杨帆 于 2025-2-23 09:55 编辑

小辣椒 发表于 2025-2-21 23:28
用了亚纶的播放器效果
是，用了马老师、亚伦老师的代码

查看完整版本: 人间真的值得来这一趟