请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
儿童画以简洁的线条和优雅的色块完成每一幅画作，是人类文艺智慧的杰出代表。本文，我们通过CSS+HTML来模拟一幅儿童画作，我们将画一棵树。分三步走：
步骤一：树干+顶部圆果，一个div元素+::before伪元素便可完成。我们先来完成这一部分。翠花，上酸菜！——哦不不，上代码：
/* css */
.trunk {
position: relative;
width: 4px;
height: 200px;
background: linear-gradient(to top, black, tan, gray, tan);
}
.trunk::before {
position: absolute;
content: '';
width: 30px;
height: 30px;
background: radial-gradient(orange,darkred);
border-radius: 50%;
left: calc(50% - 15px);
top: -30px;
}
<!-- html -->
<div class="trunk"></div>
代码整体没有什么难度，树干是 4*200 的尺寸，背景使用线性渐变修饰；伪元素尺寸 30*30，圆形，用径向渐变假装成水果的样纸，然后定位使之结在树干的最顶端之上。效果如下：
步骤二：画叶子。使用三个div元素做 trunk 的子元素，利用每一个div的两个伪元素做两片叶子：
/* css */
.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%; }
<!-- html -->
<div class="trunk">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
树叶代码中，.leaf选择器相对简单，绝对定位、尺寸为 0*0（绝对定位元素不设置大小就是没有大小）、带一个CSS变量 --angle 用来作规范伪元素的旋转角度。两个伪元素做绝对定位、运动原点设在底部中央，便于精准安排位置。第二、三张叶子单独设置 top 属性。效果如下：
步骤三：让树摇曳。这个相对简单吧，设置一个CSS关键帧动画，然后在 .trunk（树干）选择器加入 animation 属性：
/* .leaf 选择器 animation 属性 */
.trunk {
/* 这里是其他代码 */
animation: swear 3s infinite alternate;
}
/* 关键帧动画 */
@keyframes swear {
from { transform: skew(3deg); }
to { transform: skew(-3deg); }
}
最终效果：
| 
发表于 2024-2-11 19:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-2-11 21:15
