论坛首页 › 单图音画 › 希望夏天的风吹来好消息

醉美水芙蓉 发表于 前天 22:45

希望夏天的风吹来好消息

<meta charset="utf-8">
<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:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/93f7623736d3bbb2f0c9eb0b03331f18_preview.webp) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
      .intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background:linear-gradient(180deg, rgba(255, 0, 0, 0) 90%, rgba(8, 8, 13, 0.98)100%),url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/93f7623736d3bbb2f0c9eb0b03331f18_preview.webp), linear-gradient(45deg, #e56420, #c555aa, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 2s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
#wrapper {
                position: absolute;
                padding: 5px;
                font-weight:300;font-size:3.2em;
                filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
      width: 100%;left: 50%;transform: translateX(-50%);z-index: 12;text-align: center;
                bottom: 60px;
        }
        .char {
                display: inline-block;
                padding: 0 3px;
                opacity: 0;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
        }
        audio { position: absolute; left: 160px; top: 20px; }
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 0);
                        opacity: 1;
                }

        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg);}

        }
        .stop .char{animation-play-state: paused;}
#bnt{left: 10px;bottom: 10px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer; }
#bnt:hover { mask: unset; }
#pic{position:absolute;top:25px; left:28px;background:#fff;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:22px;
      height: 22px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#fff; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:22px;
      height: 22px}
#tmsg {position:absolute; z-index: 4;
      font: normal 13px sans-serif;
      color: #fff;
         bottom: 28px;
      left:64%;}
#prog {position:absolute;z-index: 40;
      width: 58%;
      height: 4px;background:#fff;
      cursor: pointer;
         bottom: 32px;border-radius: 20px;
left:5%;
}
#prog-bar {
            height: 100%;
            background: #ff6500;
            width: 0%;border-radius: 20px;
      }
      
   #dt{z-index: 40;
      position:absolute;
      width: 35px;
      height: 34px;filter:invert(0%);
      bottom: 16px;border-radius: 0px;
   left: 72%;
      cursor: pointer;
    }
#mutedbnt{z-index: 40;
   width: 25px;
      height: 24px;
      filter:invert(0%);
   left: 0%;
      cursor: pointer;
    }
#imeg{z-index: -1;
   width: 25px;
      height: 24px;
      filter:invert(0%);
   left: 0%; position:absolute;
      
    }
#volumeSlider{bottom: 42px;left: 75%;z-index: 40;
             position:absolute;
         width: 17%; height: 3px;border-radius: 20px;

}
input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 4 10 4 0 / 0px 0px 0 2000px;
}

#loopbnt{z-index: 40;
      position:absolute;
      width: 22px;filter:invert(100%);
      height: 18px;background:#0000;
      bottom: 25px;border-radius: 0px;
   right: 60px;
      cursor: pointer;
    }   
      
#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 300;left: 12%;top: 11%;color:#000}

#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px;   bottom:26px; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div class='intro'></div>
<div id="bnt">
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="tmsg">00:00|00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"><div class="now"></div></div></div>
<div id="dt">
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif"id="mutedbnt" onClick="pc()"/>
<img src="https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png"id="imeg" />
</div>
<inputtype="range" min="0.1" max="1" step="0.1" value="0.8" id="volumeSlider" >
<br>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
<div id="testImg" >
<div id="wrapper"></div>
</div>
<audio id="aud"src="https://www.joy127.com/url/150899.mp3" loop autoplay ></audio>
</div>
<script>
const gc = `希望夏天的风吹来好消息
演唱：江念念/音乐山
LRC编辑：醉美水芙蓉
希望夏天的风 吹来好消息
吹散所有烦恼 委屈和叹息
日子慢慢升温 事事都顺意
往后岁岁年年 平安又欢喜
枝头花开满庭 暖阳落心底
走过人间烟火 平凡也珍惜
抛开心头愁绪 放宽小脾气
静待美好奔赴 慢慢奔向你
晚霞染遍天际 晚风轻轻起
放下奔波忙碌 好好做自己
所有付出努力 都不会孤寂
好运如约而至 岁岁皆顺意
希望夏天的风 吹来好消息
吹散所有烦恼 委屈和叹息
日子慢慢升温 事事都顺意
往后岁岁年年 平安又欢喜
晚风温柔吹起 万事皆如意
年年岁岁安好 幸福不缺席
谢谢欣赏！
`;

      const gcAr = lrc2HC(gc);
      let curkey = 0, isSeeking = false;

      aud.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(aud.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
      };

      aud.onended = () => {
                curkey = 0;
                aud.play();
      }

      aud.onseeked = () => calcKey();

      function lrc2HC(text) {
                let lrcAr = [];
                let ar = text.trim().split('\n');
                ar.sort();
                let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        if(reg.test(item)) {
                              let result = item.match(reg);
                              let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                              lrcAr.push(.trim()]);
                        }
                });
                return lrcAr ? lrcAr : ;
      };

      function calcKey() {
                for (let j = 0; j < gcAr.length; j++) {
                        if (aud.currentTime <= gcAr) {
                              curkey = j - 1;
                              break;
                        }
                }
                if (curkey < 0) curkey = 0;
                if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
                let time = gcAr?. ?? 0 - gcAr;
                isSeeking = false;
                showLrc(gcAr, wrapper, time);
      }

      function showLrc(str, targetElm, time) {
                if(isSeeking) return;
                targetElm.innerHTML = '';
                const chars = str.split('').map(c => c === ' ' ? ' ' : c);
                const frg = document.createDocumentFragment();
                chars.forEach((char, idx) => {
                        const span = document.createElement('span');
                        span.innerHTML = char;
                        span.classList.add('char');
                        const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                        const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                        span.style.cssText += `
                              color: #${Math.random().toString(10).substring(2,8)};
                              --x: ${x}px;
                              --y: ${y}px;
                              --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
      }
</script>

<script>
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
image=document.getElementById('testImg');

bnt.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop')) :( aud.pause(),image.classList.add('stop'));

const intro= document.querySelector('.intro');
let mState = () => aud.paused ? (picc.style.opacity = '1',pic.style.opacity = '0',mutedbnt.style.opacity = '0',imeg.style.opacity = '1',intro.style.animationPlayState = 'paused') : (picc.style.opacity= '0',pic.style.opacity = '1',mutedbnt.style.opacity = '1',imeg.style.opacity = '0',intro.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

/*进度条 进度时间*/
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 p = (coordEnd - coordStart) / this.offsetWidth
   
      });

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;
      };
/*结束*/
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
            function pc() {
var img = document.getElementById("mutedbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif") {aud.muted= true;
img.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png"; volumeSlider.value=0;
} else {aud.muted= false;volumeSlider.value=0.8;
img.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";}
}


function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
</script>

klxf 发表于 9 小时前

漂亮~谢谢精彩分享

查看完整版本: 希望夏天的风吹来好消息