ysj147 发表于 2024-12-29 21:01

《琵琶声声揪心肠》 - 赵洋

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2041794">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1846164">
<div class="cont-area">
<div style="position: absolute; width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #5c2904, 0px 0px 0px 8px #a54906,0px 0px 5px 15px #5c2904;overflow:hidden;border-radius:1%;margin-top:50px;margin-LEFT: -160px;">
<marquee STYLE="WiDTH: 1200px; HeiGHT: 700px" HEIGHT="700px" BEHAVIOR="alternate" WIDTH="1200" SCROLLAMOUNT="6"><imgsrc ="https://s1.ax1x.com/2023/02/26/pppRsBR.jpg" WIDTH="3000" HEIGHT="700"></MARQUEE>

<img src="https://s21.ax1x.com/2024/12/29/pAxR0zD.png" alt="" style="position: absolute; width: 1200px;height: 700px; transform: translate(-1200px, 0px); mix-blend-mode: normal;" />

<img src="https://z4a.net/images/2024/12/29/yh2007.gif" alt="" style="position: absolute; width: 1200px;height: 580px; transform: translate(-1200px, 0px); mix-blend-mode: screen;" />
        <img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" style="position: absolute; width: 150px;height: 80px; transform: translate(-950px, 500px); mix-blend-mode: multiply;" />

<style>
#papa {
        margin: auto;
        width: 1200px;
        height: 700px;
      top: -700px;
      left: 0px;;
        background: url('https://s11.ax1x.com/2023/03/23/ppwmpo8.png') 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;
      width: 150px;
        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: 58px;
      height: 58px;
        background: url('https://www.emojiall.com/images/60/telegram/1f33a.gif');
        animation: moving var(--du) var(--de) infinite linear var(--state);
}
@keyframes moving {
        from { transform: translate(100,0) rotate(var(--deg)); opacity: 0.2; }
        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://www.emojiall.com/images/60/telegram/1f338.gif" alt="" title="暂停/播放" />
        <audio id="aud" src="https://cccimg.com/view.php/07cf23891f4577fa860684d2142c03e1.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://cccimg.com/down.php/f3adc8684d0a444380d203c04e43ee14.js';
/*彩虹外链网盘lrc-ysj.js*/
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

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

let geci = [
        ,
        ,
      ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       

];

</script>


<div style="position: relative; top: -1420px; LEFT: 0px;z-index: 12435;">
<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: absolute;width: 500px;height: 50px;top:30px;LEFT: 0px;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>

</TD></TR></TBODY></TABLE>
<DIV style="HEIGHT: 800px"

约会阳光 发表于 2024-12-29 23:36

真漂亮，视听盛宴，谢谢ysj147老师精彩分享

ysj147 发表于 2024-12-31 19:47

约会阳光 发表于 2024-12-29 23:36
真漂亮，视听盛宴，谢谢ysj147老师精彩分享

谢谢欣赏，点赞！

容轩听雨 发表于 2025-1-1 10:24

图片滚动特效，动画叠加极为灵动，歌曲寄愁情，令人回味！赞，问好老师！

巫荣云师 发表于 2025-1-1 13:10

问好亦是金147老师:handshake{:1_292:}！

巫荣云师 发表于 2025-1-1 13:12

祝亦是金147老师2025年元旦快乐！:handshake{:1_292:}！
页: [1]
查看完整版本: 《琵琶声声揪心肠》 - 赵洋