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

一举成名（祝你金榜题名）

<style>
      #bj {
            position: relative;
            width: 580px;
            height:900px;
            margin: 10px 120px;
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            background:#800 url() no-repeat center / cover;--state:paused;
      }
#vid{width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}


#bfq{   
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:0%;background:#0000;
   left: 18%;z-index: 20;}



#cp{   
      position:absolute;
      width: 240px;border-radius: 50%;
      height:240px;animation: rotating 6s infinite linear var(--state);
      top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   
   left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url('https://img2.baidu.com/it/u=1057898325,3387050088&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
      top:6%; left:45%;z-index: 2;
      width: 150px;background: url('https://pic1.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/85%;
      height: 300px;
      cursor: pointer;
}

.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}

.lrc {
            position: absolute;
            top: 45%;
            left: 5%;
         
            width: 540px;
            height: 350px;
            overflow: hidden;

      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
            font-size: 20px;
            color: #4169E1;
            font-weight: 400;
            transition: .3s all ease;
         list-style-type: none;
    text-align: center;
       display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
             margin: 0 auto;
            cursor: pointer;
      }

      .lrc #ul li.active {
         font-size: 25px;
            color: #FF0000;
            font-weight: 550;
             text-align: center;
            
      }
</style>
<div id="bj">
<video id="vid" src="https://img2.tukuppt.com/video_show/15653652/01/28/14/6288af0609ce4.mp4" loop muted autoplay=""></video>
<div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>
<audio id="audio" src="https://tc.boxue.ltd/view.php/ecccee0c4573f81b9987545f60e1d68b.mp3" loop autoplay ></audio>

<script>
      let lrc = `一举成名（祝你金榜题名）-史海军
作词：小平
作曲：潘跃宝
只为书写英雄梦
十年寒窗苦作功
大巧若拙勤为径
思如泉涌竹在胸
春夏秋冬贵有恒
挥泪洒血誓成功
荣装凯旋沐春风
一举成名圆好梦
祝你旗开得胜
祝你马到成功
祝你金榜题名
祝你折桂蟾宫
祝你鱼跃龙门
祝你虎攀高峰
祝你前程似锦
祝你鲲鹏翔空
只为书写英雄梦
十年寒窗苦作功
大巧若拙勤为径
思如泉涌竹在胸
春夏秋冬贵有恒
挥泪洒血誓成功
荣装凯旋沐春风
一举成名圆好梦
祝你旗开得胜
祝你马到成功
祝你金榜题名
祝你折桂蟾宫
祝你鱼跃龙门
祝你虎攀高峰
祝你前程似锦
祝你鲲鹏翔空
祝你旗开得胜
祝你马到成功
祝你金榜题名
祝你折桂蟾宫
祝你鱼跃龙门
祝你虎攀高峰
祝你前程似锦
祝你鲲鹏翔空
`;
      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 obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      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 __Ox1263fc=["\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","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\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 _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            ul.children?.classList.add('active');

            const currentLyric = result.word.trim();
            if (!currentLyric) return;
            const nextTime = result?.time || audio.duration;
            const duration = nextTime - result.time;
            const charIndex = duration > 0 ?
                Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
                currentLyric.length;
}

      let rafId;
      audio.addEventListener("timeupdate", () => {
            rafId = requestAnimationFrame(setOffset);
      });

var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),bnt.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),bnt.title = '点击暂停' );


audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());

cp.onclick =cz.onclick = () => audio.paused ? (audio.play(),vid.play(),cz.classList.remove('purple')) : (audio.pause(),vid.pause(),cz.classList.add('purple'));
</script>

klxf 发表于 昨天 11:29

应景之作，祝莘莘学子成人成才
页: [1]
查看完整版本: 一举成名（祝你金榜题名）