论坛 › 欢乐水吧 › 新春

马黑黑 发表于 2024-2-9 08:34

新春

本帖最后由 马黑黑 于 2024-2-9 08:35 编辑 <br /><br /><style>
#papa { position: relative; margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/dragon.jpg') no-repeat center/cover, radial-gradient(transparent,tan); background-blend-mode: overlay; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; }
#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: 100px; left: 40px; }
#papa img:nth-of-type(2) { top: 0; right: 0; }
li-zi { position: absolute; left: 310px; top: 220px; width: 20px; height: 20px; border-radius: 50%; background: gold; }
@keyframes moving { from { transform: rotate(0) translate(0,0); } to { transform: rotate(var(--deg)) translate(-540px,300px); } }
@keyframes swear { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1425315057" autoplay loop></audio>
        <img src="https://638183.freep.cn/638183/small/dgls1.jpg" alt="" />
        <img src="https://638183.freep.cn/638183/small/dgls2.jpg" alt="" />
</div>

<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>

马黑黑 发表于 2024-2-9 08:35

代码
<style>
#papa { position: relative; margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/dragon.jpg') no-repeat center/cover, radial-gradient(transparent,tan); background-blend-mode: overlay; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; }
#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: 100px; left: 40px; }
#papa img:nth-of-type(2) { top: 0; right: 0; }
li-zi { position: absolute; left: 310px; top: 220px; width: 20px; height: 20px; border-radius: 50%; background: gold; }
@keyframes moving { from { transform: rotate(0) translate(0,0); } to { transform: rotate(var(--deg)) translate(-540px,300px); } }
@keyframes swear { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1425315057" autoplay loop></audio>
      <img src="https://638183.freep.cn/638183/small/dgls1.jpg" alt="" />
      <img src="https://638183.freep.cn/638183/small/dgls2.jpg" alt="" />
</div>

<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>

朵拉 发表于 2024-2-9 08:54

首席沙发，欣赏 金龙吐珠{:4_190:}

朵拉 发表于 2024-2-9 08:56

@马黑黑
提前祝马师 新春愉快，事事顺意{:4_204:}{:4_190:}

小九 发表于 2024-2-9 11:41

黑黑除夕快乐！{:4_187:}

醉美水芙蓉 发表于 2024-2-9 12:00

醉美水芙蓉 发表于 2024-2-9 12:01

上海朝阳 发表于 2024-2-9 12:39

新春年健康快乐！

世外桃源 发表于 2024-2-9 14:24

霸气的制作，中国龙一条{:4_178:}

世外桃源 发表于 2024-2-9 14:25

还有龙珠出来{:4_199:}

世外桃源 发表于 2024-2-9 14:25

欣赏老师的好精彩制作，高人的

世外桃源 发表于 2024-2-9 14:25

提前祝老师新年快乐！

樵歌 发表于 2024-2-9 15:32

龙头帖子{:4_176:}

樵歌 发表于 2024-2-9 15:33

龙年快乐

樵歌 发表于 2024-2-9 15:33

龙年桃运

樵歌 发表于 2024-2-9 15:33

龙凤呈祥

樵歌 发表于 2024-2-9 15:33

金龙吐宝

樵歌 发表于 2024-2-9 15:34

龙颜大悦{:4_170:}

樵歌 发表于 2024-2-9 15:35

龙腾盛世

樵歌 发表于 2024-2-9 15:35

龙钟老态

查看完整版本: 新春