论坛 › 音乐沙龙 › 阿衣莫(越鼓版)（试帖黑黑老师图片配色同步歌词代码9）

亦是金 发表于 2024-1-25 14:45

阿衣莫(越鼓版)（试帖黑黑老师图片配色同步歌词代码9）

本帖最后由 亦是金 于 2025-1-9 22:49 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2046193">

<style>
#papa {
      position: relative;
      margin: 0px 0px 0px calc(50% - 681px);
      width: 1200px;
      height: 700px;
      border-radius: 18px;
      background: radial-gradient(circle,transparent var(--radius), rgba(25,25,112,.3) calc(var(--radius) + 30%), rgba(25,25,112,.3) 0), url('https://z4a.net/images/2023/10/19/231019c.gif') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      cursor: pointer;
      z-index: 1;
      --radius: 50%;
}<!-边框半径：18px；
背景：径向梯度（圆形，透明var（--radius），rgba（25,25112，.3）calc（var（--radius）+30%），rgba0（25,25212，0.3），url（'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/231019c.gif'）无重复中心/盖子；
盒子阴影：3px 3px 20px#000；
游标：指针；
z指数：1；
--半径：0%；->

</style>

<div id="papa"></div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2036385420" autoplay loop></audio>

<script>
(function (){
      var step = 3, rad = 0, raf = null;
      var render = () => {
                rad += step;
                if(rad <= 0 || rad >= 100) step = -step;
                papa.style.setProperty('--radius', rad + '%');
                if(!aud.paused) raf = requestAnimationFrame(render);
      };
      var mState = () => aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
      aud.addEventListener('playing', mState, false);
      aud.addEventListener('playing', mState, false);
      papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
/*（函数（）｛0｝
步骤=3，行=0，raf=0；
渲染=（）=>{
rad+=步长；
（弧度<=0<弧度>=100）步长=-步长；
Papa.style.setProperty（“--半径”，rad+“%”）；
如果（！aud.phased）raf=requestAnimationFrame（渲染）；
{0}
mState=（）=>aud是否已暂停？取消动画帧（raf）：raf=requestAnimationFrame（渲染）；
aud.addEventListener（'播放'，mState，false）；
aud.addEventListener（'播放'，mState，false）；
Papa.onclick=（）=>aud暂停了吗？aud.play（）：aud.pause（）；*/
</script>


<script>

let sFile = document.createElement('script');
sFile.src = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/lrc-ysj.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
        LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '#mypic',
                lrc_css: (`bottom: 20px; right: 440px; color: rgba(255,255,255,.9); --bg: url('https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg'); font-size: 2.4em;`)
        });
};

let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

</script>

<div style="position: relative; top:-720px;LEFT: -420px;z-index: 12435;">
<style type="text/css">

@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }

body { overflow-x: hidden; }
#baiBox {
      font-size: 26px;
      color: #ff0000;
      position: relative;
      text-align:center;
      transform: translate(0%,35%);
      font-weight: normal;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);
      background-position: -1200px 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);
       -webkit-animation:loop 3s linear 1000000;
}

@-webkit-keyframes loop{
   0%{background-position: -1200px 0;}
   100%{background-position: -0 0;}
}

.tit {
      position: relative;
      width: 700px;
      top: 20px;
      left: 0px;;
      font-family:迷你简细圆;
      font-size: 40px;
      text-shadow: 2px 2px #ff00ff;
      font-weight:bold;
      color:#802A2A;z-index: 10; }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span>《 阿 衣 莫 》(越鼓版)</span>
<span > </span></div>

<div style="position: relative;width: 500px;height: 50px;top:620px;LEFT: 1130px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:22px;">亦是金在线音乐</span></span></span></p></div>
</style>

</td></tr></table>

起个网名好难 发表于 2024-1-25 16:22

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

马黑黑 发表于 2024-1-25 17:59

有趣

亦是金 发表于 2024-1-25 19:08

起个网名好难 发表于 2024-1-25 16:22


问好老师！{:4_180:}

亦是金 发表于 2024-1-25 19:09

马黑黑 发表于 2024-1-25 17:59
有趣

问好老师！谢谢你的代码！{:4_180:}

马黑黑 发表于 2024-1-25 19:10

亦是金 发表于 2024-1-25 19:09
问好老师！谢谢你的代码！

{:4_191:}

朵拉 发表于 2024-1-25 19:23

亦是金老师的制作 更完美了，欣赏学习{:4_190:}

樵歌 发表于 2024-1-25 19:57

超级大音箱，效果特佳。{:4_174:}

樵歌 发表于 2024-1-25 19:58

还有变幻的画面里那人人在弹奏，好有节奏的感觉！

亦是金 发表于 2024-1-25 20:28

朵拉 发表于 2024-1-25 19:23
亦是金老师的制作 更完美了，欣赏学习

问好朵拉！向你学习！{:4_187:}

亦是金 发表于 2024-1-25 20:29

樵歌 发表于 2024-1-25 19:58
还有变幻的画面里那人人在弹奏，好有节奏的感觉！

问好樵歌管理！谢谢欣赏点评！{:4_180:}

樵歌 发表于 2024-1-25 20:43

亦是金 发表于 2024-1-25 20:29
问好樵歌管理！谢谢欣赏点评！

问好是金老师{:4_190:}

红影 发表于 2024-1-25 20:47

那个小动图弹琴的节奏和歌曲很配啊，还有漂亮的浪花，这个制作太美了{:4_199:}

红影 发表于 2024-1-25 20:48

同步歌词以及标题字都加得漂亮。欣赏亦是金老师好帖{:4_199:}

亦是金 发表于 2024-1-25 22:17

樵歌 发表于 2024-1-25 20:43
问好是金老师

{:4_180:}

亦是金 发表于 2024-1-25 22:17

红影 发表于 2024-1-25 20:48
同步歌词以及标题字都加得漂亮。欣赏亦是金老师好帖

问好红影！谢谢欣赏点评！{:4_187:}

红影 发表于 2024-1-25 23:21

亦是金 发表于 2024-1-25 22:17
问好红影！谢谢欣赏点评！

问好亦是金老师，这个做得真漂亮{:4_187:}

亦是金 发表于 2024-1-28 20:38

红影 发表于 2024-1-25 23:21
问好亦是金老师，这个做得真漂亮

问好红影！谢谢夸奖！{:4_187:}

红影 发表于 2024-1-28 21:06

亦是金 发表于 2024-1-28 20:38
问好红影！谢谢夸奖！

不客气，问好亦是金老师，晚上好{:4_187:}

查看完整版本: 阿衣莫(越鼓版)（试帖黑黑老师图片配色同步歌词代码9）