无题
<style>#mydiv { margin: -70px 0 0 calc(50% - 593px); width: 1024px; height: 700px; background: url('https://638183.freep.cn/638183/t24/jpg/24u.jpeg') 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(orange,darkred); 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=29393038" autoplay loop></audio>
<img style="position: absolute; top: 0;" src="https://638183.freep.cn/638183/Pic/81/bird3.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> 帖子代码
<style>
#mydiv { margin: -70px 0 0 calc(50% - 593px); width: 1024px; height: 700px; background: url('https://638183.freep.cn/638183/t24/jpg/24u.jpeg') 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(orange,darkred); 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=29393038" autoplay loop></audio>
<img style="position: absolute; top: 0;" src="https://638183.freep.cn/638183/Pic/81/bird3.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_199:} 鲜花庆新春。感谢黑黑的好帖{:4_199:} 这些小花像摇动的小人儿，好可爱{:4_187:} 左右效果，厉害了 山里人 发表于 2024-2-11 14:41
左右效果，厉害了
下午好！节日好 红影 发表于 2024-2-11 13:47
代码制作的花丛，好漂亮啊
儿童画{:4_170:} 好美的南国风光。
过节好！ 梦油 发表于 2024-2-11 17:01
好美的南国风光。
过节好！
确实，这边风景独好 哇塞~~~黑黑你太强大了，纯代码的小草小花{:4_178:} 这个小辣椒去直接套用一个，这个不会修改就秒做套用一个 像花季少女在向春天摇动小手{:4_189:} 马黑黑 发表于 2024-2-11 16:39
儿童画
很纯真{:4_173:} 红影 发表于 2024-2-11 20:57
很纯真
{:4_181:} 樵歌 发表于 2024-2-11 20:16
像花季少女在向春天摇动小手
真会想象 小辣椒 发表于 2024-2-11 20:03
哇塞~~~黑黑你太强大了，纯代码的小草小花
{:4_191:} 马黑黑 发表于 2024-2-11 20:58
CSS运用的典范{:4_187:} 红影 发表于 2024-2-11 21:57
CSS运用的典范
{:4_187:}