论坛 › 欢乐水吧 › 2024新春快乐

山里人 发表于 2024-2-11 17:04

2024新春快乐

本帖最后由 山里人 于 2024-2-11 17:28 编辑 <br /><br /><style>
#papa { position: relative; margin: 0 0 0 calc(50% - 703px); width: 1280px; height: 680px; background: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/2/cj.png') no-repeat center/cover, radial-gradient(transparent,tan);

background-blend-mode: overlay; box-shadow: 3px 3px 20px #ff000; overflow: hidden; z-index: 1; }
li-zi { position: absolute; left: 310px; top: 220px; width: 20px; height: 20px; border-radius: 50%; background: gold; }
#papa img { position: absolute; cursor: pointer; mix-blend-mode: multiply; transform-origin: 50% 0; animation: swear 1s infinite alternate var(--state); }
#papa img:nth-of-type(1) { top: 10px; left: 40px; }
#papa img:nth-of-type(2) { top: 0; right: 0; }

@keyframes moving { from { transform: rotate(0) translate(0,0); } to { transform: rotate(var(--deg)) translate(-540px,300px); } }
@keyframes swear { from { transform: rotate(-5deg); } to { transform: rotate(4.5deg); } }


#papa video { position: absolute; width: 100%; height: 120%; top: -100px; opacity: .25; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }

#dt{ position: absolute; width:107px; height :87px; top: 320px; left: 350px; }
#dt1{ position: absolute; width:150px; height :100px; top: 420px; left: 100px; }
</style>


<div id="papa">

<video id="vid"src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca4afd33e2.mp4" muted autoplay loop></video>      

      <img src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/2/dl1.jpg" alt="" />
      <img src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/2/dl2.jpg" alt="" />


<img id="dt" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/2/xg.gif" alt="" />
<img id="dt1" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/2/l.png" alt="加" />
<script>
var imgs = document.querySelectorAll('#papa > img');
var all = 36;
for(let i = 0; i < all; i++) {
      let lz = document.createElement('li-zi');
      lz.style.cssText += `
                --deg: ${Math.random() * -60}deg;
                opacity: ${Math.random()};
                animation: moving ${Math.random() * 4 + 4}s -${Math.random() * 4}s infinite var(--state);
      `;
      papa.prepend(lz);
}

var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused')) : (papa.style.setProperty('--state', 'running'));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
imgs.forEach(img => img.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>


<script>


(function() {

let sf = document.createElement('script');
sf.src = 'https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/js/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        let player = new ypP();
        player.setAudSrc('https://shanlr.s3-us-east-1.ossfiles.com/yu/%E6%96%87%E6%A3%AE-%E6%96%B0%E5%B9%B4%E6%AD%8C%E6%9B%B22024.mp3 ');
        player.setBtnCss(`
                width: 120px;
      left: 860px;
                bottom: 40px;
                --btnBg: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/2/lt.png') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: #ffcc00;
                --btnSize: 80px;
        `);
        player.setLrcCss('top: 570px;left: 420px; color: #f9fafc; font:normal 2.6em 微软雅黑; --bg: #ffcc00;');
        player.lrcAr = [
,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
] };

})();

</script>

红影 发表于 2024-2-11 18:44

很喜庆的帖子，另加的几个元素也很有趣。欣赏山里人好帖，感谢美好祝福{:4_187:}

红影 发表于 2024-2-11 18:45

一点小瑕疵，底图的logo没去掉呢。
贺年帖子都亮起来{:4_187:}

樵歌 发表于 2024-2-11 20:19

好热闹的贺年帖子！是你们那的村春晚吗。祝山里人新年快乐！

小辣椒 发表于 2024-2-11 20:51

欣赏山里人的精彩制作{:4_187:}

小辣椒 发表于 2024-2-11 20:52

喜庆的贺帖，问好山里人，祝新年快乐！

亦是金 发表于 2024-2-11 22:12

欣赏山里人美帖，很喜庆热闹的场面！{:4_199:}

梦油 发表于 2024-2-12 09:18

祝山里人朋友春节快乐、万事如意。

查看完整版本: 2024新春快乐