论坛 › 『唯美音画』 › 明月逐人归

福宝 发表于 2024-6-28 15:15

明月逐人归

本帖最后由 福宝 于 2024-6-28 15:38 编辑 <br /><br /><style>
#papa {
        margin: 0 0 0 calc(50% - 931px);
        position: relative;
        width: 1700px;
        height: 900px;
      top:130px;
        background: tan url('https://gd-hbimg.huaban.com/cd2a16f4f20479b41b418cbb1ce296bd6bb964d6a4de7-XuqUFR_fw1200') no-repeat top center/cover;
        background-blend-mode: normal;
        border: 3px solid /*rgba(0,0,200,.6)*/ #93d5dc;
        border-radius: 12px;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        z-index: 1;
}
.mypic {
    position: absolute;
    right:0px;   
    top:0px;   
    cursor: pointer;
    z-index: 3;
    }
.mypic1 {
    position: absolute;
    width: 100%;
        height: 100%;
        object-fit: cover;
    cursor: pointer;
    mix-blend-mode: Multiply;
    z-index: 3;
    }
#btnplay {
        position: absolute;
        top: 770px;
        left: 690px;
        width: 60px;
        filter: hue-rotate(220deg) drop-shadow(0 0 2px transparent);
        cursor: pointer;
        transition: filter .35s ease-in;
        z-index: 6;
        animation: rotating 5s infinite linear var(--state);
}
#btnplay:hover {
        filter: hue-rotate(0) drop-shadow(0 0 30px white);
}

#mydiv {
      margin: auto;
      width: 1700px;
         height: 900px;
      z-index: 5;
      overflow: hidden;
      position: relative;

}
li-zi {
      position: absolute;
      animation: rot 9s infinite linearvar(--state);
}
@keyframes rot { to { transform: rotate(3turn); } }
#vid {
        position: absolute;
        top: -120px;
        width: 100%;
        height: 130%;

        filter: opacity(.09);
z-index: 2;
}
@keyframes rotating {
        to { transform: rotate(1turn); }
}
</style>

<div id="papa">
<div class="mypic"><img src="https://gd-hbimg.huaban.com/19aa5db2f1c381480534ac0da1c22eb7fb2afd6e2a305a-FWfd95_fw1200" alt="" /></div>
<div class="mypic1"><img src="https://gd-hbimg.huaban.com/9d5c9fd38775531088bf5d4a994da11af9804e5648174-VBX4NL_fw1200" alt="" /></div>

<div id="mydiv"></div>
        <video id="vid" src="https://st0.dancf.com/gaoding/gaoding/4b8bc518-bd75-4ed7-9869-5a80a8e19fe451437687.mp4" loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=32743521" autoplay loop></audio>
        <img id="btnplay" src="https://gd-hbimg.huaban.com/eec6702c387d637dc72dd38de334cca9e7b5acf67545-UGBsoT_fw1200" alt="" title="播放/暂停" />
</div>

<script>
(function() {
let canMove = true;
class Lizi {
      constructor(pa) {
                this.pa = pa;
                this.left = 10;
                this.top = 1;
                this.xstep = 1;
                this.ystep = 0;
                this.ele = document.createElement('li-zi');
      }

      creating() {
                this.ele.style.cssText = `
                        left: ${this.left}px;
                        top: ${this.top}px;
                `;
                this.pa.appendChild(this.ele);
                this.moving();
      }

      moving() {
      if(canMove) {
                this.left += this.xstep;
                this.top += this.ystep;
                if(this.left >= this.pa.offsetWidth) this.left = - this.ele.offsetWidth;
                if(this.top >= this.pa.offsetHeight) this.top = -this.ele.offsetHeight;
                this.ele.style.left = this.left + 'px';
                this.ele.style.top = this.top + 'px';
                }
                requestAnimationFrame(this.moving.bind(this));
      }
}               
let stepAr = ;
let txtAr = ['❀','✿','❀','✿','❀','✿'];
Array.from({length: 35}).forEach((element) => {
      let xIdx = Math.floor(Math.random() * stepAr.length),
                yIdx = Math.floor(Math.random() * stepAr.length),
                txtIdx = Math.floor(Math.random() * txtAr.length);
      element = new Lizi(mydiv);
      element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
      element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
      element.xstep = stepAr;
      element.ystep = stepAr;
      element.bg = 'none';
      element.ele.innerText = txtAr;
      element.creating();
      
      element.ele.style.fontSize = 20 + Math.ceil(Math.random() * 35) + 'px';
       /* element.ele.style.color = '#' + Math.random().toString(16).substr(-6);*/
      element.ele.style.color = 'snow';
});

        let script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js';
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause(),canMove = false) :
                (papa.style.setProperty('--state','running'), vid.play(), canMove = true);
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);       

btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>
<br><br><br><br><br><br>

蜻蜓 发表于 2024-6-28 22:41

这种宽屏模式我喜欢

查看完整版本: 明月逐人归