小白兔乖乖 TO：猫猫新年快乐！ （套用黑黑无题效果）
<style>#mydiv { margin: 150px 0 0 calc(50% - 721px); width: 1280px; height: 692px; background: url('https://xlaj.cn/assets/file/zp/20240211194045.gif') no-repeat center/cover; box-shadow: 3px 3px 8px #000; overflow: hidden; display: flex; flex-direction: row; gap: 50px; justify-content: center; align-items: end; position: relative; z-index: 1; }
.trunk { position: relative; bottom: 0; width: 4px; height: 200px; background: linear-gradient(to top, black, tan, gray, tan); cursor: pointer; transform-origin: 50% 100%; animation: swear 3s infinite alternate var(--state); }
.trunk::before { position: absolute; content: ''; width: 30px; height: 30px; background: radial-gradient(Yellow,orange); border-radius: 50%; left: calc(50% - 15px); top: -30px; }
.leaf { position: absolute; --angle: 45deg; }
.leaf::before, .leaf::after { position: absolute; content: ''; left: -10px; width: 20px; height: 40px; border-radius: 50% 100%; transform-origin: 50% 100%; background: linear-gradient(80deg,lightgreen,green,lightgreen); transform: rotate(var(--angle)); }
.leaf::after { --angle: -45deg; }
.leaf:nth-of-type(2) { top: 20%; }
.leaf:nth-of-type(3) { top: 50%; }
@keyframes swear { from { transform: skew(3deg); } to { transform: skew(-4deg); }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1914675191" autoplay loop></audio>
<img style="position: absolute; left: 580px;top: 0;" src="https://xlaj.cn/assets/file/zp/20240211194315.gif" alt="" />
<img style="position: absolute; width: 200px; height: 137px;left: 880px; top: 250px;" src="https://xlaj.cn/assets/file/zp/20240211202401.gif" alt="" />
</div>
<script>
(function () {
var total = Math.floor(mydiv.offsetWidth / 60);
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('div');
item.className = 'trunk';
item.style.animationDelay = -1.5 * Math.random() + 's';
item.style.height = Math.random() * 120 + 120 + 'px';
item.innerHTML = '<div class="leaf"></div>'.repeat(3);
item.onclick = () => aud.paused ? aud.play() : aud.pause();
mydiv.append(item);
});
})();
var mState = () => mydiv.style.setProperty('--state',aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
</script> @大猫咪
猫猫这里你最小了，送首儿歌给你贺新年{:4_170:} @马黑黑
黑黑直接套用一个，这个可以秒做{:4_170:}
我就改了小花蕾的颜色，其他都没有改，加了只老虎
小辣椒 发表于 2024-2-11 20:33
@马黑黑
黑黑直接套用一个，这个可以秒做
好 一开门打老虎就进来了。{:4_173:}
小辣椒朋友春节快乐！ 这个设计好有趣，动图的设计很不容易。充满童趣的制作。猫猫收礼开心{:4_199:} 小兔子的动作和花朵的摇动配合得那么好呢，亲爱的厉害，这个制作好棒{:4_199:} 小辣椒学霸的，做得真好。{:4_187:} @大猫咪 快来收下快乐！注意有只大老虎哦{:4_173:} 小辣椒，能不能把老虎换成猫咪呀{:4_189:}有老虎，怕把猫咪给吓着了，虽然老虎是徒弟，介这年头，实力为尊{:4_170:} 欣赏美帖，祝大猫咪，小辣椒春节快乐！{:4_187:} 收礼来了，谢谢小辣椒，可爱的小白兔{:4_170:}{:4_204:}{:4_199:} 小辣椒新年快乐{:4_179:} 樵歌 发表于 2024-2-11 21:38
@大猫咪 快来收下快乐！注意有只大老虎哦
猫咪是大老虎的老师，不怕不怕啦{:4_173:} 大猫咪新年快乐{:4_204:} 马黑黑 发表于 2024-2-11 20:58
好
黑黑好~~{:4_187:} 梦油 发表于 2024-2-11 21:11
一开门打老虎就进来了。
小辣椒朋友春节快乐！
哈哈~~梦油说的对，幼儿园的小朋友玩的 梦油 发表于 2024-2-11 21:11
一开门打老虎就进来了。
小辣椒朋友春节快乐！
梦油新年好！{:4_187:} 醉美水芙蓉 发表于 2024-2-11 21:17
小辣椒速度呀！
这个直接套用的，速度肯定快了{:4_170:}