马黑黑 发表于 2024-2-11 19:45

CSS+HTML：画棵儿童画的树

<style>
.mum { font-size: 18px; }
.mum p { margin: 10px 0; }
.mum pre { padding: 12px; background: #eee; color: navy; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.mum mark { padding: 0 4px; background: lightblue; }
.mum a { color: red; }
.mum a:hover { color: darkred; }
.tGreen { color: green; }
.tRed { color: red; }

.trunk { position: relative; margin: 20px auto; width: 4px; height: 200px; background: linear-gradient(to top, black, tan, gray, tan); transform-origin: 50% 100%; }

.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%; }
.ani { animation: swear 3s infinite alternate; }
@keyframes swear { from { transform: skew(3deg); } to { transform: skew(-3deg); } }
</style>

<div class="mum">

<p>儿童画以简洁的线条和优雅的色块完成每一幅画作，是人类文艺智慧的杰出代表。本文，我们通过CSS+HTML来模拟一幅儿童画作，我们将画一棵树。分三步走：</p>
<p>步骤一：树干+顶部圆果，一个div元素+::before伪元素便可完成。我们先来完成这一部分。翠花，上酸菜！——哦不不，上代码：</p>
<pre>
<span class="tGreen">/* css */</span>
.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;
}

<span class="tGreen">&lt;!-- html --&gt;</span>
&lt;div class="trunk"&gt;&lt;/div&gt;
</pre>
<p>代码整体没有什么难度，树干是 4*200 的尺寸，背景使用线性渐变修饰；伪元素尺寸 30*30，圆形，用径向渐变假装成水果的样纸，然后定位使之结在树干的最顶端之上。效果如下：<br><br></p>
<div class="trunk"></div>
<p>步骤二：画叶子。使用三个div元素做 trunk 的子元素，利用每一个div的两个伪元素做两片叶子：</p>
<pre>
<span class="tGreen">/* css */</span>
.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%; }

<span class="tGreen">&lt;!-- html --&gt;</span>
&lt;div class="trunk"&gt;
        &lt;div class="leaf"&gt;&lt;/div&gt;
        &lt;div class="leaf"&gt;&lt;/div&gt;
        &lt;div class="leaf"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>树叶代码中，.leaf选择器相对简单，绝对定位、尺寸为 0*0（绝对定位元素不设置大小就是没有大小）、带一个CSS变量 --angle 用来作规范伪元素的旋转角度。两个伪元素做绝对定位、运动原点设在底部中央，便于精准安排位置。第二、三张叶子单独设置 top 属性。效果如下：<br><br></p>
<div class="trunk">
        <div class="leaf"></div>
        <div class="leaf"></div>
        <div class="leaf"></div>
</div>
<p>步骤三：让树摇曳。这个相对简单吧，设置一个CSS关键帧动画，然后在 .trunk（树干）选择器加入 animation 属性：</p>
<pre>
<span class="tGreen">/* .leaf 选择器 animation 属性 */</span>
.trunk {
        <span class="tGreen">/* 这里是其他代码 */</span>
        animation: swear 3s infinite alternate;
}

<span class="tGreen">/* 关键帧动画 */</span>
@keyframes swear {
        from { transform: skew(3deg); }
        to { transform: skew(-3deg); }
}
</pre>
<p>最终效果：</p>
<div class="trunk ani">
        <div class="leaf"></div>
        <div class="leaf"></div>
        <div class="leaf"></div>
</div>

</div>

小辣椒 发表于 2024-2-11 20:05

这个就是刚才看见的那个无题里面的小草小花，纯代码的制作{:4_178:}

小辣椒 发表于 2024-2-11 20:06

这个要重新修改尺寸也是花时间的，直接套用简单{:4_170:}

小辣椒 发表于 2024-2-11 20:07

黑黑你也是太厉害了，纯代码制作的小草还会飘动

马黑黑 发表于 2024-2-11 21:02

小辣椒 发表于 2024-2-11 20:05
这个就是刚才看见的那个无题里面的小草小花，纯代码的制作

是的

马黑黑 发表于 2024-2-11 21:02

小辣椒 发表于 2024-2-11 20:07
黑黑你也是太厉害了，纯代码制作的小草还会飘动

这个简单的吧

马黑黑 发表于 2024-2-11 21:02

小辣椒 发表于 2024-2-11 20:06
这个要重新修改尺寸也是花时间的，直接套用简单

{:4_190:}

醉美水芙蓉 发表于 2024-2-11 21:15

红影 发表于 2024-2-11 21:22

单个的儿童画看懂了，那个帖子里的还没完全懂，高低的错落有致看明白了，item.style.height = Math.random() * 120 + 120 + 'px'; 是从120到240
平面的排布没明白，是怎么让那17个均匀排布的？其实主要是这句没看懂 item.innerHTML = '<div class="leaf"></div>'.repeat(3);{:4_173:}

红影 发表于 2024-2-11 21:27

这个有意思，一环套一环，带伪元素的叶子也可以做nth-of-type() 和动画呢。
第一对叶子的高度就是40吧。

马黑黑 发表于 2024-2-11 21:51

醉美水芙蓉 发表于 2024-2-11 21:15
黑黑老师厉害！

{:4_190:}

马黑黑 发表于 2024-2-11 21:52

红影 发表于 2024-2-11 21:27
这个有意思，一环套一环，带伪元素的叶子也可以做nth-of-type() 和动画呢。
第一对叶子的高度就是40吧。

叶子的尺寸是 .leaf 伪元素的尺寸。top 是叶子在 trunk 上的垂直位置

马黑黑 发表于 2024-2-11 21:57

红影 发表于 2024-2-11 21:22
单个的儿童画看懂了，那个帖子里的还没完全懂，高低的错落有致看明白了，item.style.height = Math.random( ...

看父元素的 CSS 代码，它用了 display: flex; 语句，这是flex布局，其中，还有 gap: 50px; flex-direction: row; justify-content: center; align-items: end; 也都是关键，gap 是子元素间距，flex-direction 是排列方向，后两个是水平居中、底端对齐；trunk 用了 position: relative; 语句，这样它在父元素约束下的水平排列能得以实现（比较一下图片，用的是HTML代码嵌入式 style，position 为绝对定位）。

红影 发表于 2024-2-11 22:28

马黑黑 发表于 2024-2-11 21:52
叶子的尺寸是 .leaf 伪元素的尺寸。top 是叶子在 trunk 上的垂直位置

嗯嗯，知道了{:4_187:}

红影 发表于 2024-2-11 22:31

马黑黑 发表于 2024-2-11 21:57
看父元素的 CSS 代码，它用了 display: flex; 语句，这是flex布局，其中，还有 gap: 50px; flex-directio ...

哦 哦，忘了去看前面，光顾着看后面了{:4_173:}

马黑黑 发表于 2024-2-11 23:44

红影 发表于 2024-2-11 22:31
哦 哦，忘了去看前面，光顾着看后面了

元素间可以彼此影响。父元素约束子元素的排列方式，我们用的不少

马黑黑 发表于 2024-2-11 23:45

红影 发表于 2024-2-11 22:28
嗯嗯，知道了

left，right，top，bottom，这些属性，具体定位

红影 发表于 2024-2-12 13:45

马黑黑 发表于 2024-2-11 23:44
元素间可以彼此影响。父元素约束子元素的排列方式，我们用的不少

嗯，这个用得十分清晰巧妙{:4_199:}

红影 发表于 2024-2-12 13:47

马黑黑 发表于 2024-2-11 23:45
left，right，top，bottom，这些属性，具体定位

真正的运用还是挺有讲究的。

马黑黑 发表于 2024-2-12 17:22

红影 发表于 2024-2-12 13:47
真正的运用还是挺有讲究的。

也没啥。水平和垂直方向两两配套就行
页: [1] 2 3
查看完整版本: CSS+HTML：画棵儿童画的树