醉美水芙蓉 发表于 前天 20:14

朵拉特效音画《落花轻舟》

<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin:30px -230px;width: 1286px;height: 720px;background:#1a2933 url("") no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","SimHei", "Arial", "sans-serif";--state:running;}
#pa {margin:150px 74px;width: 600px;height: 420px;position: relative;z-index: 1;transform: perspective(600px) rotateY(10deg)rotatex(0deg);overflow:hidden;}

#photos img{float:right;width:600px;height: 420px;position:relative;LEFT:0px;top:0px;overflow:hidden;z-index: 1;}

#photos {position: absolute;z-index:1; width: calc(800% * 9);
            opacity: 1;animation:animate20s linear infinite;}

#paa{margin:-570px 620px;width: 600px;height: 420px;position:relative;z-index: 1;transform: perspective(600px) rotateY(170deg)rotatex(0deg);overflow:hidden;}

#photoss img{float:right;width:600px;height: 420px;position:relative;LEFT:0px;top:0px;overflow:hidden;z-index: 1;}

#photoss{position: absolute;z-index:1; width: calc(800% * 9);
               opacity: 1;
                animation:animate20s linear infinite;}

   
    @keyframes animate {
         0%,20% {      right:-800%;}
      25%,30% {       right: -700%; }
      35%,40% {      right: -600%;}
      45%,50% {       right:-500%; }
      55%,60% {      right:-400%; }
      65%,70% {      right:-300%; }
      75%,80% {       right:-200%; }
      85%,90% {      right:-100%;}
       95%,100% {      right: 0%;}
   }
#player {position:absolute;top: 75%;z-index: 98;
            left: 45%;
width: 150px;
height: 150px;
display: grid;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        width: 30%;
        height: 30%;
display: grid;
        place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
        #progressBar{width:50%;background:#eee;position: absolute;border-radius: 20px;cursor: pointer;top: 94%;z-index: 99;
            left: 25%;}
#playProgressBar{position: relative;left:0;background:ff0000;height:4px;width:100%;border-radius: 20px; cursor: pointer;}
.now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 4px;border-radius: 20px;
      width: 100%; cursor: pointer;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 12px;margin: -4px -2px;
      height: 12px;border-radius: 20px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 14px sans-serif;margin: -40px 0%;position: absolute;
       }
.end{color: #fff; font: 400 14px sans-serif;margin: -40px 0%;right:0px;   position: absolute;}
        #wrapper {
                position: absolute;
                padding: 10px;
                font-weight:300;font-size:3.5em;
                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: 565px;
        }
        .char {
                display: inline-block;
                padding: 0 2px;
                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;}
</style>
<div id="papa">
<div id="pa" >
<divid="photos" >
<img src="https://pic1.imgdb.cn/item/69ce75596ccec478dfad15da.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce75896ccec478dfad1629.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce75b66ccec478dfad1678.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1202.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1201.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1206.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1205.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1203.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1204.jpg" />
</div>
</div>
<divid="paa">
<divid="photoss">
<img src="https://pic1.imgdb.cn/item/69ce75596ccec478dfad15da.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce75896ccec478dfad1629.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce75b66ccec478dfad1678.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1202.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1201.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1206.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1205.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1203.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1204.jpg" />
</div>
</div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<divid="progressBar">
<spanclass="start"></span>
<divid="playProgressBar">
<spanclass="now"></span>
</div>
<spanclass="end"></span>
</div>

<div id="testImg" >
<div id="wrapper"></div>
</div>
</div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/ccd4ec8291eed4109d2ce53972c9b13e.mp3" loop autoplay ></audio>

       
<script>

// Audiotimeupdate
                        aud.addEventListener("timeupdate",function(){
                               
                                ///
                                var percent= aud.currentTime / aud.duration
                               
                                //,*,100%
                                var sp = 600 / 100 ;
                               
                                //width
                                var swidth =(percent * 100 * sp) + "px";
                                console.log(percent*100,swidth)
                               
                                //
                                document.getElementById("playProgressBar").style.width = swidth;
                                const now = document.querySelector('.now')//
progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    now.style.width = p.toFixed(3) * 100 + '%'
})

        progressBar.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / progressBar.offsetWidth; }//})
                                //2λС
                                document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
        })                       
                       
                //       
        const start = document.querySelector('.start')
const end = document.querySelector('.end')

function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}<img src="static/image/smiley/default/shy.gif" smilieid="8" border="0" alt="" />{second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
               
console.dir(aud);

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

image=document.getElementById('testImg');

player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',image.classList.remove('stop'),photos.style.animationPlayState = 'running',photoss.style.animationPlayState = 'running') <img src="static/image/smiley/default/sad.gif" smilieid="2" border="0" alt="" /> aud.pause(),player.style.animationPlayState = 'paused',image.classList.add('stop'),photos.style.animationPlayState = 'paused',photoss.style.animationPlayState = 'paused');


</script>
<script>
       
const gc = `
落花轻舟 - 无界乐创
词曲：宋艺洋
制作：朵拉
落花飘 轻舟远
琴弦拨动岁月浅
风起处 梦流转
一声叹息绕心间
桥下溪水绕几圈
倒映月光似从前
她的伞 红线牵
他却站在梦的边
石板路 青苔黏
脚步轻 记忆重如水
你问我 谁的眼
藏着人间百年怨
我只笑 一声浅
时光渡口皆离散
落花轻舟 风声急
你在何方 渡迷离
若有缘 再相聚
莫问归期 莫问归期
桥下溪水绕几圈
倒映月光似从前
她的伞 红线牵
他却站在梦的边
石板路 青苔黏
脚步轻 记忆重如水
你问我 谁的眼
藏着人间百年怨
我只笑 一声浅
时光渡口皆离散
落花轻舟 风声急
你在何方渡迷离
若有缘 再相聚
莫问归期 莫问归期
`;

      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>

tianjinde 发表于 昨天 17:14

页: [1]
查看完整版本: 朵拉特效音画《落花轻舟》