亚伦影音工作室 发表于 2024-7-11 13:04

爱的暴风雨 - 何呵呵(欢歌)

<style>
#papa {margin: 210px -300px;width: 1164px;height: 620px;background: linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;}
#tu{position: absolute;top:0%; left:0%;
      width: 100%;background:url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg') no-repeat center/cover;
      height: 100%;animation: round 4s linear infinite; }

@keyframes round{
0% {
transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
1% {
transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(10deg)contrast(110%)brightness(150%)
opacity:1}
100% {
transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg)contrast(100%)brightness(200%);
opacity:0}
}
#mplayer { position: absolute; left:3%; bottom: 20px; width: 50px; height: 50px;   place-items: center; transition: .8s; --opt: 1;z-index: 15; }
#mplayer::before, #mplayer::after { position: absolute; content: '';width: 50px; height: 50px;transition: .3s; cursor: pointer; }
      #mplayer::before { background: url('https://pic.imgdb.cn/item/6434c8b80d2dde5777f1e210.png')no-repeat center/cover; opacity: calc(var(--opt) * 1);}
      #mplayer::after { background: url('https://pic.imgdb.cn/item/6434ccee0d2dde5777f6d8f5.png')no-repeat center/cover;opacity: calc(1 - var(--opt)); }
      #mplayer:hover { transform: scale(1);}

#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ffffff;
         bottom: 30px;
      left:84%;}
#prog {position: absolute;z-index: 8;
      width: 74%;
      height: 1.5px;
      cursor: pointer;
         bottom: 35px;
left:8%;
border-radius: 1px;}
.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: block;position: absolute;bottom: 10px; left:3%;z-index: 5;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; bottom: 40px; left:92%;font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}

</style>
<divid="papa">
<div id='tu'></div>
<span id="fullscreen">全屏</span>
<div id="mplayer"></div>
<div id="tmsg">00:00 | 00:00</div>
<div id="prog" title="播放进度条"></div>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>       
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/79/cf/0d/211d40284aec5339b066eea1968e5ae9/audio.mp3" autoplay loop></audio>
<script>
var mState = () => {
      mplayer.style.setProperty('--opt', +aud.paused);

       mplayer.title = ['暂停','播放'][+aud.paused];
      };
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #ff0000, #ff0000, #ff0000 '+ aud.currentTime / aud.duration * 100 + '%, #eeeeee 0)';});
                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;
      };
/*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
</script>
<script >
var lrc = ` 爱的暴风雨 - 何呵呵(欢歌)
作曲 : 任帅兵/作词 : 任帅兵
西风吹落叶满地
走遍千山只为你
曾经为爱着了迷
最后你却又离我而去
多少相思无情雨
滴滴洒落在心底
是你给了我 勇气
让我义无返顾走下去
我从来没想过
失去你或放弃
你就像暴风雨
云里来风里去
我甚至来不及
拥抱你亲吻你
就匆匆的离去
我的心只为你
爱下去不逃避
这一场暴风雨
让我措手不及
这结局快让我
心迷离的彻底
在挣扎中离去
西风吹落叶满地
走遍千山只为你
曾经为爱着了迷
最后你却又离我而去
多少相思无情雨
滴滴洒落在心底
是你给了我 勇气
让我义无返顾走下去
我从来没想过
失去你或放弃
你就像暴风雨
云里来风里去
我甚至来不及
拥抱你亲吻你
就匆匆的离去
我的心只为你
爱下去不逃避
这一场暴风雨
让我措手不及
这结局快让我
心迷离的彻底
在挣扎中离去
我从来没想过
失去你或放弃
你就像暴风雨
云里来风里去
我甚至来不及
拥抱你亲吻你
就匆匆的离去
我的心只为你
爱下去不逃避
这一场暴风雨
让我措手不及
这结局快让我
心迷离的彻底
在挣扎中离去
`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
</script >

红影 发表于 2024-7-11 15:28

这个制作漂亮，尤其全屏文字的设置和位置调整。
欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2024-7-11 18:05

         欣赏老师的佳作！

小辣椒 发表于 2024-7-11 20:56

亚伦也是特别棒，看见那个按钮比例效果，这里立马图图效果出来了{:4_199:}

小辣椒 发表于 2024-7-11 20:57

欣赏亚伦的精彩制作，按钮设置也是漂亮{:4_178:}

梦油 发表于 2024-7-11 21:04

美，很美，实在美！
页: [1]
查看完整版本: 爱的暴风雨 - 何呵呵(欢歌)