杨帆 发表于 2024-12-17 20:32

人间走一趟，拼的是健康

<style>

#papa { margin: 130px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/668bf0ecd9c307b7e92f5332.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px #000;position: relative; perspective:1200px;-webkit-perspective:1200px;overflow: hidden;z-index: 1; }

#papa::after { content: ''; position: absolute; width: 100%; height: 100%; opacity: .45; background: url('');}

#pic { position: absolute; left:32%; top: 41%; width: 230px; height: 120px; mix-blend-mode: screen; -webkit-mask-image:radial-gradient(black 35%, transparent 70%); opacity: 1;}
</style>

<div id="papa">
<img id="pic" src="" alt="" />
</div>

<script>
(function() {
        (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10%; left: 80%; transform: translate(-50%)',player_css: 'bottom: 5px; left: 50%; transform: translate(-50%)',playerCode: `

<style>

#mplayer {--ww: 180px;--hh:50px;--state: paused;position: absolute;width: var(--ww);height: var(--hh);transform-style: preserve-3d;transform: rotateX(45deg);-webkit-transform: rotateX(45deg);animation: rot3d 120s infinite linear;animation-play-state: var(--state);cursor: pointer;pointer-events: auto;}

.mline {position: absolute;width: 8px;height: 10px;bottom: 0;left: calc(50% - 4px);border-radius: 8px;transition: all .35s;opacity: .95;}

.mline::before {position: absolute;content: '';width: 12px;height: 12px;left: calc(50% - 6px);background: var(--psecolor);border-radius: 50%;transition: all var(--ts);animation: up 1s infinite;animation-play-state: var(--state);}

#btnMsg { position: absolute; color: snow; background: green; opacity: 0.3; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; pointer-events: auto;cursor: pointer; top: 92%; left: 91%; z-index: 5; }

#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.8em 华文新魏;;color:hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 4; }

#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }

@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; }to { width: 100%; } }
@keyframes rot3d { to { transform: rotateY(1turn); } }@keyframes up { to { top: -20px; } }
#vid1 {
    position: absolute;
    left:-10px;
    top:-80px;
    width: 110%;
    height:120%;
    mix-blend-mode:soft-light;
    opacity: 0.8;   
    object-fit: cover;
}
#vid2{
    position: absolute;
    left:-10px;
    top:-80px;
    width: 110%;
    height:120%;
    mix-blend-mode:soft-light;
    opacity: 0.8;   
    object-fit: cover;
}
</style>
<video id="vid1" src="https://img.tukuppt.com/video_show/2418175/00/01/72/5b49440ab4e45.mp4" autoplay loop muted></video>
<video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/05/45/30/video6362e4fa279f6.mp4" autoplay loop muted></video>
<audio id="aud" src="https://cccimg.com/view.php/019b1929f734a645f2a3a3aef7074b8f.mp3" autoplay loop></audio>
<div id="lrc" data-lrc="HCPlayer"></div>
<div id="mplayer"></div>
<span id="btnMsg">全屏观赏</span>`,};

let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, fs = false, timerId;let total = Math.floor(mplayer.offsetWidth / 5), mRad = Math.floor(mplayer.offsetWidth / 2), tnow = Date.now();let isHover = (e,x,y,w,h) => e.offsetX > x && e.offsetX< x + w &&e.offsetY > y && e.offsetY < y + h;papa.onmousemove = (e) => {papa.style.cursor = isHover(e,mplayer.offsetLeft,mplayer.offsetTop,mplayer.offsetWidth,mplayer.offsetHeight+20) ? 'pointer' : 'default';clearTimeout(timerId);btnMsg.style.opacity = '.95';timerId = setTimeout('btnMsg.style.opacity = "0"',3000);};papa.onclick = (e) => {if(isHover(e,mplayer.offsetLeft,mplayer.offsetTop,mplayer.offsetWidth,mplayer.offsetHeight+20)) {aud.paused ? aud.play() : aud.pause();}};btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();for (j = 0; j < total; j++) {let ele = document.createElement('span');ele.className = 'mline';ele.style.cssText += `background: linear-gradient(to bottom, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});transform: rotateY(${j*360/total}deg) translateZ(${mRad}px);--psecolor: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});--ts: ${Math.random()}s;`;mplayer.appendChild(ele);}let lines = document.querySelectorAll('.mline');let update = () => {if(Date.now() - tnow > 65) {lines.forEach((item, key) => {let ph = aud.paused ? 0 : mplayer.offsetHeight;item.style.height = Math.random() * ph + 'px';});tnow = Date.now();}requestAnimationFrame(update);};update();aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());document.addEventListener("fullscreenchange", () => {if(document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), mplayer.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), mplayer.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};};mkPlayer.HCPlayer = playCode;})(this);
      let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      HCPlayer({
               lrcAr: lrcAr,
                lrc_css: 'left: 47%; top:6%; --bg: linear-gradient(180deg,hsla(120,100%,50%,.35),hsla(120,50%, 35%,.65));',
                player_css: '--ww:200px; --hh: 50px; left: 6%; bottom: 10%;',
      });

      let fs = false, timerId;
      btnMsg.style.opacity = '0';
      btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();
      mplayer.onmousemove = () => {
                clearTimeout(timerId);
                btnMsg.style.opacity = '.95';
                timerId = setTimeout('btnMsg.style.opacity = "0"',3000);
      };

})();
</script>
<script type="module">
        import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        qp.fs('papa','btnMsg');
</script>

<script>

var mState = () => {
    mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')
    mplayer.title = aud.paused ? '播放' : '暂停';
    aud.paused ? (vid1.pause(),vid2.pause()) : (vid1.play(),vid2.play());
};
    aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
    mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>


起个网名好难 发表于 2024-12-17 21:00

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

杨帆 发表于 2024-12-17 21:32

起个网名好难 发表于 2024-12-17 21:00


谢谢难难老师鼓励，祝福老师幸福安康{:4_191:}

红影 发表于 2024-12-17 22:20

漂亮，这样的场景和视频，很奇妙。很赞{:4_199:}

红影 发表于 2024-12-17 22:20

播放器也很漂亮，歌词也不知得当，欣赏杨帆好帖{:4_187:}

杨帆 发表于 2024-12-18 00:32

红影 发表于 2024-12-17 22:20
漂亮，这样的场景和视频，很奇妙。很赞

谢谢支持与鼓励，祝福影子康乐天天{:4_187:}

秋思梦景 发表于 2024-12-18 05:51

问候老师好！精美音画佳作，精心制作分享。为您点赞。{:5_116:}{:4_187:}

樵歌 发表于 2024-12-18 09:00

精美的制作！好漂亮。{:4_431:}

梦江南 发表于 2024-12-18 09:19

好漂亮的音画制作！{:4_199:}

杨帆 发表于 2024-12-18 10:12

秋思梦景 发表于 2024-12-18 05:51
问候老师好！精美音画佳作，精心制作分享。为您点赞。

谢谢支持与鼓励，祝福秋思梦景康乐天天{:4_191:}

杨帆 发表于 2024-12-18 10:14

樵歌 发表于 2024-12-18 09:00
精美的制作！好漂亮。

问好樵歌，谢谢支持与鼓励，祝福幸福安康{:4_190:}

杨帆 发表于 2024-12-18 10:15

梦江南 发表于 2024-12-18 09:19
好漂亮的音画制作！

谢谢支持与鼓励，祝福梦江南康乐天天{:4_204:}

小辣椒 发表于 2024-12-18 14:25

动感的场景，好听歌曲，欣赏杨帆的精彩制作

红影 发表于 2024-12-18 16:53

杨帆 发表于 2024-12-18 00:32
谢谢支持与鼓励，祝福影子康乐天天

这个帖子很有道理，受教了{:4_187:}

愤怒的葡萄 发表于 2024-12-18 17:47

挺不错的歌曲，我喜欢。

杨帆 发表于 2024-12-19 00:14

小辣椒 发表于 2024-12-18 14:25
动感的场景，好听歌曲，欣赏杨帆的精彩制作

谢谢小辣椒鼓励！那就好好听，开心跳呗~

身心律动，是一种鲜活的生命艺术，可以唤醒内在智慧。

杨帆 发表于 2024-12-19 00:16

红影 发表于 2024-12-18 16:53
这个帖子很有道理，受教了

大白话，真道理，祝福安康永远{:4_187:}

杨帆 发表于 2024-12-19 00:17

愤怒的葡萄 发表于 2024-12-18 17:47
挺不错的歌曲，我喜欢。

谢谢葡萄喜欢~祝福幸福安康{:4_187:}

小辣椒 发表于 2024-12-19 20:52

杨帆 发表于 2024-12-19 00:14
谢谢小辣椒鼓励！那就好好听，开心跳呗~

身心律动，是一种鲜活的生命艺术，可以唤醒内在智慧。

再次欣赏杨帆动感音乐加动感背景，好制作{:4_187:}

红影 发表于 2024-12-19 21:13

杨帆 发表于 2024-12-19 00:16
大白话，真道理，祝福安康永远

是的，大白话最入心了。感谢杨帆的美好祝福{:4_187:}
页: [1] 2
查看完整版本: 人间走一趟，拼的是健康