亦是金 发表于 2024-1-14 22:35

《爱随浪花漂去远方》 - 崔伟立（试帖黑黑老师图片配色同步歌词代码2）

本帖最后由 亦是金 于 2024-1-15 20:41 编辑 <br /><br /><style>
#papa {
        margin: 10px 0 10px calc(50% - 681px);
        width: 1200px;
        height: 700px;
        background: url('https://z4a.net/images/2023/10/07/1005f.gif') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        display: grid;
        place-items: center;
        position: relative;
        z-index: 1;
}
#mypic {
        position: absolute;
        mix-blend-mode: normal;/*混合混合模式：正常*/
        cursor: pointer;
        transition: filter 1s;
        animation: rot 6s infinite linear var(--state);
}
#mypic:hover {
        filter: invert(150%) drop-shadow(4px 4px 20px #ffffff);
}
li-zi {
        position: absolute;
        width: 40px;
      height: 40px;
        background: url('https://z4a.net/images/2024/01/14/xin40.png');
        animation: moving var(--du) var(--de) infinite linear var(--state);
}
@keyframes moving {
        from { transform: translate(100,0) rotate(var(--deg)); opacity: 0; }
        to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <img id="mypic" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniu11xg5.png" alt="" title="暂停/播放" />
        <audio id="aud" src="https://www.qqmc.com/mp3/music247128706.mp3" autoplay loop></audio>
</div>

<script>

(function() {

let total = 20;
Array.from({length: total}).forEach((lz,key) => {
        lz = document.createElement('li-zi');
        let hudu = Math.PI / 180 * 360 / total * key;
        let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
        lz.style.cssText += `
                --xx: ${xx}px;
                --yy: ${yy}px;
                --deg: ${360 / total * key}deg;
                --du: ${4 + Math.random() * 10}s;
                --de: -${Math.random() * 3}s;
        `;
        papa.prepend(lz);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.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: 40px; 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-15 12:08

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

好看好看

亦是金 发表于 2024-1-15 20:42

liumang 发表于 2024-1-15 12:08
好看好看

问好liumang管理！谢谢点赞！{:5_116:}

bgmnet 发表于 2024-2-7 22:11

试贴。。。。。？
不是正式贴吗？
页: [1]
查看完整版本: 《爱随浪花漂去远方》 - 崔伟立（试帖黑黑老师图片配色同步歌词代码2）