论坛 › 音乐沙龙 › 《乖乖隆滴咚》 黑黑老师（落花缤纷）代码试帖

亦是金 发表于 2023-5-9 22:14

《乖乖隆滴咚》 黑黑老师（落花缤纷）代码试帖

本帖最后由 亦是金 于 2023-5-10 18:55 编辑 <br /><br /><div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: -310px;">



<div id="mplayer">

<css-doodle grid="16">
        :doodle {
                @size: 1200px 700px;
               background: lightgreen url('https://s4.ax1x.com/2022/02/16/Hht7Sf.jpg') no-repeat center/cover;
        }



    :doodle(:hover) { transform: skew(0deg); }
    position: absolute;
        left: @r(100)%;
        top: -10%;
    :after {
      content: '@p(♩,♪,♫,♬,♥,❉,✿,❀,☸)';
                color: #f97bfb;
                font-size: @r(8, 30)px;;
    }
        animation: fall @r(6,20)s @r(-6, 6)s infinite var(--state);
        @keyframes fall {
                0% { top: -20%; transform: rotate(0deg); }
                100% {top: 120%; transform: rotate(@p(360, 720)deg); }
        }
</css-doodle>

<style>

#lrc { --motion: cover1; --tt: 5s; --state: paused; position: relative; left: 450px; bottom: 220px; font: bold 2.4em sans-serif; color: hsl(20, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); z-index: 99;}

#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(100, 90%, 50%, .45), hsla(80, 90%, 50%, .6), hsla(0, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);z-index: 99; }

@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-10deg); } }}
.pic { position: absolute; width: 664px; height: 116px; top: -80px; object-fit: cover; opacity: 1; }




</style>



<style type="text/css">

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

body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 800px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}



.tit { position: relative;width: 300px;height: 30px;top:-680px;LEFT: -360px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:32px;">《乖乖隆滴咚》</span>
<span style="color:#3d46f7;"><span style="font-size:20px;">- 三兄弟组合</span></div>

<div style="position: relative;width: 500px;height: 50px;top:-100px;LEFT: 980px;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:26px;"> 亦是金在线音乐 </span></span></span></p></div>

<div style="position: relative;width: 600px;height: 50px;top:-160px;LEFT: 150px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#0f09fe;"><span style="font-family:华文隶书;"><span style="font-size:28px;"></span></span></span></p></div>

</style>

<div id="papa">

<div id="lrc" data-lrc="花潮lrc在线"></div>
<img class="pic" src="" alt="" /></div>
<div id="btnFs">全屏欣赏</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1960101823" autoplay="" loop=""></audio>

</div>

<script>
(function() {
        let fs = false, timerId;
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
        });
        btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
        document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
let mKey = 0, mFlag = true;
let playNext = () => {mKey = 0; mFlag = true; aud.play();}
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
];
aud.addEventListener('timeupdate', () => {

                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });
       let showLrc = (time) => {
                let name = mFlag ? 'cover1' : 'cover2';
                lrc.innerHTML = lrc.dataset.lrc = lrcAr;
                lrc.style.setProperty('--motion', name);
                lrc.style.setProperty('--tt', time + 's');
                lrc.style.setProperty('--state', 'running');
                mKey += 1;
                mFlag = !mFlag;
      };
})();

</script>


<script>
(function() {
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);

let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

小辣椒 发表于 2023-5-9 22:18

前辈速度的，马上做好了{:4_199:}

黑黑这个js我手机秒开

亦是金 发表于 2023-5-9 22:18

哈哈哈，我刚刚换了背景图片。问好小辣椒！{:4_187:}

小辣椒 发表于 2023-5-9 22:19

整体效果很好，美女加鲜花，这个音乐也是特别逗

小辣椒 发表于 2023-5-9 22:22

黑黑真的奇怪，这个js我秒开，而且现在是流量速度也是很快@马黑黑

小辣椒 发表于 2023-5-9 22:23

亦是金 发表于 2023-5-9 22:18
哈哈哈，我刚刚换了背景图片。问好小辣椒！

很漂亮，速度好快，我手机效果出来很快的

亦是金 发表于 2023-5-9 22:25

小辣椒 发表于 2023-5-9 22:19
整体效果很好，美女加鲜花，这个音乐也是特别逗

谢谢欣赏！{:4_187:}

亦是金 发表于 2023-5-9 22:26

小辣椒 发表于 2023-5-9 22:23
很漂亮，速度好快，我手机效果出来很快的

我打开也很快！{:4_189:}

小辣椒 发表于 2023-5-9 22:37

亦是金 发表于 2023-5-9 22:25
谢谢欣赏！

不客气啊

小辣椒 发表于 2023-5-9 22:38

亦是金 发表于 2023-5-9 22:26
我打开也很快！

最近我电脑不上去，就偷偷玩一下手机{:4_189:}

马黑黑 发表于 2023-5-9 22:41

小辣椒 发表于 2023-5-9 22:22
黑黑真的奇怪，这个js我秒开，而且现在是流量速度也是很快@马黑黑

这只能说明一个问题：你那里有网络临时性堵塞

小辣椒 发表于 2023-5-9 22:45

马黑黑 发表于 2023-5-9 22:41
这只能说明一个问题：你那里有网络临时性堵塞

应该没有，我现在看了一下是WiFi，不是流量

小辣椒 发表于 2023-5-9 22:46

马黑黑 发表于 2023-5-9 22:41
这只能说明一个问题：你那里有网络临时性堵塞

黒黑我准备关机了，不能玩了，晚安

马黑黑 发表于 2023-5-9 22:46

小辣椒 发表于 2023-5-9 22:45
应该没有，我现在看了一下是WiFi，不是流量

当你觉得网速不稳定时，是有堵塞的，网络使用高峰期时尤其会有这种现象

马黑黑 发表于 2023-5-9 22:47

小辣椒 发表于 2023-5-9 22:46
黒黑我准备关机了，不能玩了，晚安

88

起个网名好难 发表于 2023-5-9 23:00

欣赏佳作！

或许以下改进下更好些：
点击画面控制歌曲启停时画面跳动
歌曲停止时下落的符号仍没停止

亦是金 发表于 2023-5-9 23:05

起个网名好难 发表于 2023-5-9 23:00
欣赏佳作！

或许以下改进下更好些：


问好老师！{:4_190:}我看看怎么改！

亦是金 发表于 2023-5-9 23:07

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

红影 发表于 2023-5-10 10:41

亦是金厉害，这么快就做出了花瓣缤纷的效果。太赞了{:4_199:}

红影 发表于 2023-5-10 10:42

花瓣的颜色也设计得很好，和背景图片非常协调{:4_187:}

查看完整版本: 《乖乖隆滴咚》 黑黑老师（落花缤纷）代码试帖