首页 › 音画作品 › 《 阿 衣 莫 》(越鼓版)

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

《 阿 衣 莫 》(越鼓版)

本帖最后由 亦是金 于 2024-1-30 16:18 编辑 <br /><br /><style>
#papa {
      position: relative;
      margin: 120px 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: 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();
})();
</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: -300px;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>

liumang 发表于 2024-1-29 13:17

问好亦是金老师，这个小动图不是播放器？点击音乐会停止，按钮不会停止，是不是这样的

liumang 发表于 2024-1-29 13:18

把老师的益处码去了，点击进去看看

liumang 发表于 2024-1-29 13:19

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-1-29 13:19

欣赏精美的效果，好制作{:5_141:}

亦是金 发表于 2024-1-30 16:12

liumang 发表于 2024-1-29 13:17
问好亦是金老师，这个小动图不是播放器？点击音乐会停止，按钮不会停止，是不是这样的 ...

是的！{:5_116:}

亦是金 发表于 2024-1-30 16:13

liumang 发表于 2024-1-29 13:18
把老师的益处码去了，点击进去看看

谢谢管理！

亦是金 发表于 2024-1-30 16:13

liumang 发表于 2024-1-29 13:19
欣赏精美的效果，好制作

谢谢欣赏点赞！{:5_116:}

查看完整版本: 《 阿 衣 莫 》(越鼓版)