论坛 › 动画音画 › 【往事回眸 】 套用亚伦老师代码

梦江南 发表于 2024-7-12 11:12

【往事回眸 】 套用亚伦老师代码

<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/669086e3d9c307b7e9ad3b1e.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/669086e3d9c307b7e9ad3b1e.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://music.163.com/song/media/outer/url?id=276663.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-12 11:15

欣赏美帖

红影 发表于 2024-7-12 11:55

漂亮，人物选择漂亮，字体设计和签名标签也漂亮。
欣赏梦江南好帖{:4_199:}

最美的诗意 发表于 2024-7-12 12:31

梦江南 发表于 2024-7-12 13:32

起个网名好难 发表于 2024-7-12 11:15
欣赏美帖

问好老师，谢谢沙发分享，祝夏日安康！

梦江南 发表于 2024-7-12 13:33

红影 发表于 2024-7-12 11:55
漂亮，人物选择漂亮，字体设计和签名标签也漂亮。
欣赏梦江南好帖

问好影子，谢谢分享支持，祝夏 日安康！

梦江南 发表于 2024-7-12 13:50

最美的诗意 发表于 2024-7-12 12:31
好听！！

问好最美的诗意，谢谢您关注支持，祝您夏日安康！

红影 发表于 2024-7-12 20:44

梦江南 发表于 2024-7-12 13:33
问好影子，谢谢分享支持，祝夏 日安康！

梦江南厉害，这个帖子的制作很美{:4_199:}

梦江南 发表于 2024-7-13 10:11

红影 发表于 2024-7-12 20:44
梦江南厉害，这个帖子的制作很美

这是PS制作的用代码就生动了。

红影 发表于 2024-7-13 11:20

梦江南 发表于 2024-7-13 10:11
这是PS制作的用代码就生动了。

会PS的都很牛{:4_187:}

梦江南 发表于 2024-7-13 11:33

红影 发表于 2024-7-13 11:20
会PS的都很牛

初学者，幼儿班级的。

红影 发表于 2024-7-13 14:19

梦江南 发表于 2024-7-13 11:33
初学者，幼儿班级的。

那也比我这不会的强啊{:4_173:}

梦江南 发表于 2024-7-13 14:25

红影 发表于 2024-7-13 14:19
那也比我这不会的强啊

哪里，影子谦虚了。{:4_204:}

红影 发表于 2024-7-13 14:49

梦江南 发表于 2024-7-13 14:25
哪里，影子谦虚了。

这个图图做得真的很漂亮的{:4_187:}

梦江南 发表于 2024-7-14 11:26

红影 发表于 2024-7-13 14:49
这个图图做得真的很漂亮的

这个图图是简单的。代码像天书，真的有点难。

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

梦江南 发表于 2024-7-14 11:26
这个图图是简单的。代码像天书，真的有点难。

先跟代码混个脸熟，一点点就可以走进它们的世界了{:4_173:}

老谟深虑 发表于 2024-7-14 15:53

         欣赏老师的佳作，点赞！

梦江南 发表于 2024-7-14 17:46

红影 发表于 2024-7-14 15:11
先跟代码混个脸熟，一点点就可以走进它们的世界了

影子说得对，慢慢跟他混熟，但黑黑老师的代码是比其他先进了，用高等数学。

梦江南 发表于 2024-7-14 17:47

老谟深虑 发表于 2024-7-14 15:53
欣赏老师的佳作，点赞！

谢谢老谟老师分享，问好！

红影 发表于 2024-7-14 19:12

梦江南 发表于 2024-7-14 17:46
影子说得对，慢慢跟他混熟，但黑黑老师的代码是比其他先进了，用高等数学。

呵呵，代码里的数学都是简单的，而且用得不多的{:4_173:}

查看完整版本: 【往事回眸 】 套用亚伦老师代码