叶
<style>.outer {
left: -214px;
width: 1024px;
min-height: 520px;
position: relative;
background: #333 linear-gradient(skyblue,silver,olive);
perspective: 800px;
}
.leaf {
width: 80px;
height: 80px;
border-radius: 0 100%;
background-image: linear-gradient(darkgreen,gold), linear-gradient(45deg,transparent 49%,#eee 50%,transparent 51%);
background-blend-mode: multiply;
transform-style: preserve-3d;
position: absolute;
}
</style>
<div class="outer"></div>
<script>
let outer = document.querySelector(".outer");
let au = document.createElement("iframe");
au.src = "https://music.163.com/outchain/player?type=2&id=498640611&auto=1&height=66";
au.style.display = "none";
outer.appendChild(au);
let ww = outer.clientWidth;
let hh = outer.clientHeight;
let str = "";
for(j=0; j< 100; j++){
let left = Math.floor(Math.random() * (ww - 100));
let top = Math.floor(Math.random() * (hh - 100));
let angle = Math.floor(Math.random() * 180);
str += `<div class="leaf" style="left: ${left}px; top: ${top}px; transform: rotateY(${angle}deg);"></div>\n`;
}
outer.innerHTML += str;
</script>
一张树叶的简单画法：
.leaf {
width: 80px;
height: 80px;
border-radius: 0 100%;
background-image: linear-gradient(darkgreen,gold),
linear-gradient(45deg,transparent 49%,#eee 50%,transparent 51%);
background-blend-mode: multiply;
}
蓝色那句：实现树叶的基本形状；
红色那句：实现树叶的内部结构（渐变与叶梗）；
红紫色那句：保证红色两个渐变背景都能得到体现。
好看的叶子，啥形状都有。{:4_199:} 制作精美，真漂亮，与真的一样了。{:4_199:} 红芍药 发表于 2022-4-24 12:19
好看的叶子，啥形状都有。
就是叶子的形状哈，随机转个身，在景深里像是换了个样子而已 加林森 发表于 2022-4-24 12:23
制作精美，真漂亮，与真的一样了。
离真的差远了，有点点像而已 马黑黑 发表于 2022-4-24 12:26
就是叶子的形状哈，随机转个身，在景深里像是换了个样子而已
你们玩出了高度。。{:4_199:} 马黑黑 发表于 2022-4-24 12:27
离真的差远了，有点点像而已
在帖里放两只飞燕就更加漂亮了。{:4_189:} 加林森 发表于 2022-4-24 12:29
在帖里放两只飞燕就更加漂亮了。
对，还可以放只鹰 红芍药 发表于 2022-4-24 12:28
你们玩出了高度。。
哪里哪里？再高也高不过天空。 马黑黑 发表于 2022-4-24 12:51
对，还可以放只鹰
对头 加林森 发表于 2022-4-24 12:56
对头
{:4_170:} 马黑黑 发表于 2022-4-24 13:08
我又制作了一个，你帮着去看看。{:4_189:} 渐变色用得真漂亮，仿佛有立体的质感，配合着底图的渐变，营造了一份别样的美，黑黑真棒{:4_199:} 也可以让它们飘落的吧{:4_173:} 红影 发表于 2022-4-24 14:21
也可以让它们飘落的吧
这么美，让它们在那里留着 加林森 发表于 2022-4-24 13:33
我又制作了一个，你帮着去看看。
好像看到了，字反着的那个吧？图片的 rotateY 我是有用意的，你用不着的话可以去掉，文字就正常了。 红影 发表于 2022-4-24 14:20
渐变色用得真漂亮，仿佛有立体的质感，配合着底图的渐变，营造了一份别样的美，黑黑真棒
这个静止的叶子是置于3D场所中的 马黑黑 发表于 2022-4-24 17:19
好像看到了，字反着的那个吧？图片的 rotateY 我是有用意的，你用不着的话可以去掉，文字就正常了。
反着看挺好看的呢。 加林森 发表于 2022-4-24 17:28
反着看挺好看的呢。
喜欢就好喜欢就好{:5_106:}