论坛首页 › 单图音画 › 芙蓉音画《乘风破浪向你飘》

醉美水芙蓉 发表于 2026-7-11 22:04:08

芙蓉音画《乘风破浪向你飘》

<meta charset="UTF-8">
<style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
    #papa{ position: relative; width: 1186px; height: 700px; margin-left: -180px; margin-top: 0; overflow: hidden; background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ca94b493dd058f188727c54baa7e512d_preview.webp)no-repeat center / cover; --state: paused;}
    #dhgc{position:absolute;width: 540px;
    height: 450px;z-index: 6;
   border: 0px solid white;cursor: pointer;
    overflow: hidden;margin: 12% 10px;
}
   
.lrc { position: absolute; width:100%; height:100%;margin: 0px 0px; color: #000078;}
    .lrc #ul { width: 100%; padding: 0 10px; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);list-style: none;
      transition: 0.1s all ease;
      margin: 0;
      display: flex;color:#000;
      flex-direction: column;
      align-items: center; }
    .lrc #ul li {font:lighter 1.8em 华文新魏;   transition: 0.1s all ease;list-style-type: none;
      text-align: center; padding: 0 10px; height: 50px; line-height: 60px; cursor: pointer;white-space: nowrap; /* 防止歌词换行 */ }
    .lrc #ul li span { padding: 0 5px;transform-origin: center 50%; /* x轴和y轴均以中心为原点 */
      transition: all 0.1s cubic-bezier(0.4, 1, 0.4, 1); /* 缓动函数让动画更自然 */
      display: inline-block; /* 确保transform-origin生效 */ }
    .lrc #ul li span.active {   font:normal 2em 华文新魏; text-align: center; transform: rotate(-360deg); /* 缩放效果 */}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 80%;font:200 3.2em ZCOOL KuaiLe;color:#000;white-space:pre;-webkit-background-clip:text;z-index: 6;cursor: pointer;display: none;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); letter-spacing: 10px;}
#geci::before{position: absolute;content: attr(data-geci);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); } }
    #btnplay { position: absolute;margin: 52% 50%;width: 50px; height: 50px; cursor: pointer; animation: rotating 6s infinite linear var(--state);z-index: 60;}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#fullscreen{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 70%;
}
</style>

    <div id="papa">
<div ><img id="btnplay" src="https://pic.imgdb.cn/item/65b8fb93871b83018a66120a.png" title="播放/暂停" alt="" /></div>
<div id="dhgc"><div class="lrc">
    <ul id="ul"></ul>
      </div>
</div>
<div id="geci"></div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
    <button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="fullscreen">全屏观赏</button>
       </div>


    <audio id="audio" src="https://www.joy127.com/url/155286.mp3" loop autoplay ></audio>
    <script>
let lrc = `乘风破浪向你飘(R&B 版)
词:DJ 小鱼儿
曲:DJ 小鱼儿
宣推: 刘灿
企划: 宋来财
出品: 吉星电台2.0
LRC编辑：醉美水芙蓉
我像只落单的鸟
漫无边际的寻找
越伪装越是浮躁
无奈托付给月老
哼唱着希望曲调
向前方光茫奔跑
愿寒冬到来之前
在她的港湾停靠
乘风破浪向你飘
飘向万里的海角
菩提树下的祈祷
祈祷温暖她怀抱
雨过天晴彩虹桥
她会不会也看到
心中有你而美好
像蒙娜丽莎的微笑
Let's go
Come on
我像只落单的鸟
漫无边际的寻找
越伪装越是浮躁
无奈托付给月老
哼唱着希望曲调
向前方光茫奔跑
愿寒冬到来之前
在她的港湾停靠
乘风破浪向你飘
飘向万里的海角
菩提树下的祈祷
祈祷温暖她怀抱
雨过天晴彩虹桥
她会不会也看到
心中有你而美好
像蒙娜丽莎的微笑
Wu 向你飘
向你飘去
one two three here we go
乘风破浪向你飘
飘向万里的海角
菩提树下的祈祷
祈祷温暖她怀抱
雨过天晴彩虹桥
她会不会也看到
心中有你而美好
像蒙娜丽莎的微笑
Let's go
哼唱着希望曲调
向前方光茫奔跑
愿寒冬到来之前
在她的港湾停靠
谢谢欣赏！
`;
let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
       for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var words = lrcData.trim().split('');
            let lineWords = [];
            let startTime = parseTime(lrcTime);
            let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
                (parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
            words.forEach((word, index) => {
                lineWords.push({ time: startTime + index * wordDuration, text: word });
            });
            result.push(lineWords);
      }
function randomColor(){
    const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
    return colors;
}
      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) return i - 1;
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
      createElements();

      let containerHeight = container.clientHeight;
      let liHeight = 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;
      const visibleLines = 1;
      let prevIndex = 1;

      function setOffset() {
            let index = getIndex();
            if (index === -1) index = 0;

            let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
            ul.style.transform = `translateY(-${offset}px)`;

            if (prevIndex !== -1) {
                let prevLi = ul.children;
                if (prevLi) {
                  prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
                  prevLi.classList.remove('active');
                }
            }
            let currentLi = ul.children;
            if (currentLi) currentLi.classList.add('active');

            let currentTime = audio.currentTime;
            let currentLine = result;
            if (currentLine) {
                currentLine.forEach((wordObj, wordIndex) => {
                  let span = currentLi.children;
                  span.style.color = ul.style.color = randomColor();
                  if (currentTime >= wordObj.time &&
                        (wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
                        span.classList.add('active');
                  } else {
                        span.classList.remove('active');
                  }
                });
                const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
                if (!currentLyric) return;
               
                let charIndex = 0;
                for (let j = 0; j < currentLine.length; j++) {
                  if (currentLine.time <= currentTime) {
                        charIndex = j + 1;
                  }
                }
            
            }
prevIndex = index;
      }
audio.addEventListener("timeupdate", setOffset);

const mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');}
btnplay.onclick = () => audio.paused ? audio.play() : audio.pause();
audio.onplaying = audio.onpause = () => mState();
</script>

<script>
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function 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));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (audio.currentTime - lrcAr);
      showLrc(time);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}


function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>

<script>
function btn1() {
            
            document.getElementById('geci').style.display = 'block';
            document.getElementById('dhgc').style.display = 'none';
      }

      function btn2() {
         document.getElementById('geci').style.display = 'none';
            document.getElementById('dhgc').style.display = 'block';
      }
   let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };

</script>

klxf 发表于 2026-7-12 22:14:37

好听好看，谢谢友友精彩分享

醉美水芙蓉 发表于 2026-7-13 11:34:15

klxf 发表于 2026-7-12 22:14
好听好看，谢谢友友精彩分享

谢谢友友支持！

快乐侠 发表于 2026-7-15 08:47:02

欣赏芙蓉精采作品

醉美水芙蓉 发表于 2026-7-16 07:02:14

快乐侠 发表于 2026-7-15 08:47
欣赏芙蓉精采作品

谢谢老师支持！

查看完整版本: 芙蓉音画《乘风破浪向你飘》