亚伦影音工作室 发表于 2023-12-31 15:55

下辈子做你的心脏

<style type="text/css">
#papa {
        width: 1200px;
        height: 670px;
        background: #000000 url('https://pic.imgdb.cn/item/64e0d36a661c6c8e541a39a5.jpg') no-repeat center/cover;
        margin: 130px -300px ;
        box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;        display: grid;
        place-items: center;
overflow: hidden;
        position: relative;
        z-index: 1;
        }
        #prog { position: absolute; bottom: 85%; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:70%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;cursor: pointer;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/0em serif;color:#ffffff; cursor: pointer; background: snow; left: var(--prg); }
#btnplay { position: absolute;bottom: 35px; font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }

#tu{position: absolute;top:0%; left:0%;z-index: 2;
        width: 100%;background: #000000 url('https://pic.imgdb.cn/item/658d7b30c458853aefc07335.jpg') no-repeat center/cover;
        height: 100%;animation: round 50s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.2)translate(-8%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.2)translate(0%,8%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.2)translate(0%,-8%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1.2)translate(8%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
}
.lrc{ position: absolute;top:80%; left:0%;
    width: 860px;
    height: 100px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
        z-index: 9;
    overflow: hidden;
    display: block;
    margin: 20px -150px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:隶书;
    font-size: 30px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrcli.active{
    font-size: 40px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #Ff0A0A 4%,#F0EC92 37%,#FBFAFA 68%,#06F61A 100%);
   background-position: -2800px 0;
   filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
   }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:16%; left:78%;color:#ffffff; font: normal 2em 隶书; opacity: 1; cursor: pointer; z-index: 1111}

</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id='tu'></div>
<div class="lrc">
       <ul id="ullrc">
          </ul>
      </div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
    <span id="btnplay" title="播放/暂停">❊</span>
         <span id="slider">✈</span>
    </div>

</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music327060785.mp3" autoplay loop></audio>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</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 = 50, lrc_ul_height = 50;/*动态歌词显示的位置：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;
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };
</script>





红影 发表于 2023-12-31 20:14

播放器进度条上的小飞机真好看，双行同步歌词也好看。
欣赏亚伦老师好帖{:4_199:}

马黑黑 发表于 2023-12-31 22:38

靓
页: [1]
查看完整版本: 下辈子做你的心脏