醉美水芙蓉 发表于 2024-12-10 19:46:28

心若无所求

<style>
#cndpt{margin: 0px-100px ; opacity:1;
    position: relative;width: 1286px; height: 720px;
   background:url(https://pic.imgdb.cn/item/643dbb490d2dde5777df1d3c.gif)no-repeat 95px 180px/20%,url(https://pic.imgdb.cn/item/67503954d0e0a243d4dd6efd.gif)no-repeat 60px 80px/40%,url(https://bbs.cnzv.cc/up/upload/pic/9e92d93e0333f58ad6cb482f9f842ff3.jpg)no-repeat center/cover; }
#enopg{
    position: relative;width: 1286px; height: 720px;
   background:#000 url(https://bbs.cnzv.cc/up/upload/pic/01a251aa00732d94e96ed47e8b612a03.jpg)no-repeat center/cover;
    display:none;}
#pa{z-index:10;
        left:10%;
top: 300px;
        width: 300px;
        height: 100px;
        color: cyan;
        position: absolute;
        display: grid;
        place-items: center;
}
.pp {
        position: absolute;
        width: 1px;
        min-height: 2px;
        transform-origin: 0 50%;
        transition: height .16s linear;
        display: grid;
        place-items: start center;
}
#tz { margin: 0px auto; bottom: 20px;width: 540px; height: 300px; border: 0px solid gray; position: absolute;z-index:1;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 300 2.5em/0em 华文隶书; color:#880000; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); }
    #but {width:100%; height:100%;top:0%; left:0%;cursor: pointer;position: absolute;;z-index:1;}
#wz{position: absolute;top:120px; left:40px;
font:normal 3.2em/1em 华文隶书;
            background: -webkit-linear-gradient(135deg,#0eaf6d,#ff6ac6 25%,#147b96 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff6384 95%,#08dfb4);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
            -webkit-animation: flowCss 2s infinite linear;
      }
@-webkit-keyframes flowCss{0% {transform:translate(0%,0%)scale(0, 1);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
50% {transform:translate(0%,0%)scale(1);filter:hue-rotate(100deg)contrast(100%)brightness(100%);}
100% {transform:translate(0%,0%)scale(1);filter:hue-rotate(360deg)contrast(180%)brightness(300%);}
      }

</style>
<div id="cndpt">
<div id="pa"></div>
<div id="but" onclick="pic()"></div>
<div id="enopg" >
<div id="wz" > 心若无所求</div>
<div id="tz" data-lrc=""></di>
</div>
</div>
<audio id="aud" src="https://bbs.cnzv.cc/mp3.php/3389-1733825054.mp3" autoplay loop></audio>
<script >
function pic(){
    varimgElement= document.getElementById('enopg');
    if (imgElement.style.display === 'none' || imgElement.style.display === '') {
       imgElement.style.display = 'block';
    } else {
    imgElement .style.display = 'none';
    }
}

pa.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
wz.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wz.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wz.style.animationPlayState = 'paused');   
</script>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};
var lrc = `心若无所求-逆小蝶
词：逆小蝶/铁桥三
曲：逆小蝶/铁桥三
LRC编辑：醉美水芙蓉
前世的回眸 今生的温柔
云散不去追 走远的人不挽留
飞鸟冬去春回 又是一年秋
我的爱散落天涯 青春谁来收
看过了花开花落的春秋
也习惯了人去楼空的离愁
岁月酿了一壶故事的酒
我边喝边走不纠结过往的温柔
心中无欲则刚 无风有风都自由
闭眼只有黑 睁眼就拥有了宇宙
岁月的尽头不过又过一春秋
大胆往前走像浪花片刻不停留
遇见又错过谁 都有上天的理由
翻过千重山做自己那一叶扁舟
举杯与明月 隔空跟李白对酒
别让昨天的雨淋湿当下的感受
看过了花开花落的春秋
也习惯了人去楼空的离愁
岁月酿了一壶故事的酒
我边喝边走不纠结过往的温柔
心中无欲则刚 无风有风都自由
闭眼只有黑 睁眼就拥有了宇宙
岁月的尽头不过又过一春秋
大胆往前走像浪花片刻不停留
遇见又错过谁 都有上天的理由
翻过千重山做自己那一叶扁舟
举杯与明月 隔空跟李白对酒
别让昨天的雨淋湿当下的感受
谢谢欣赏！
`;
getAr(lrc);
const tt = Math.floor(pa.clientWidth / 4 - 5);
let pps = [];
Array(tt).fill('').forEach((_,k) => {
        let sp = document.createElement('span');
        sp.className = 'pp';
        sp.style.cssText += `
                left: ${10 + 4* k}px;
                background: linear-gradient(to bottom, #ccc, #00ff00,#ccc);
        `;
        pps.push(sp);
        pa.prepend(sp);
});

(function update() {
                let output = [...new Array(tt).keys()].map((v,k) => Math.floor(Math.random() * (aud.paused ? 0 : 80 - Math.random() * 160)));
                for(let j = 0; j < tt ; j++) {
                        pps.style.height = output + 'px';
                }
                window.requestAnimationFrame(update);
        })();
</script>

klxf 发表于 2024-12-10 22:15:14

很有味道，谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2024-12-11 19:48:03

klxf 发表于 2024-12-10 22:15
很有味道，谢谢醉美管理员精彩分享

谢谢友友支持！
页: [1]
查看完整版本: 心若无所求