纯CSS绘制风车（二）

马黑黑

效果：

代码

<style> #mydiv {     margin: 20px auto;     width: 260px;     height: 260px;     background:         linear-gradient(tan 50%, darkred 0),         linear-gradient(90deg, orange 50%, peru 0),         radial-gradient(circle, snow 6px, blue 9px, transparent 10px, transparent 0);     background-blend-mode: saturation;     clip-path: polygon(0 50%, 33.3% 33.3%, 50% 33.3%, 50% 0, 66.6% 33.3%, 66.6% 50%, 100% 50%, 66.6% 66.6%, 50% 66.6%, 50% 100%, 33.3% 66.6%, 33.3% 50%); } </style>
<div id="mydiv"></div>

马黑黑

此法，依然使用 clip-path 属性切割，polygon 的点坐标数据和方法一完全相同。
这里没有使用伪元素，完全通过 background 进行渲染，不过如果风车叶需要折线的话，把方法一的 ::before 伪元素用过了最省事。

两个线性背景同在一个位置，其中一个旋转90度，这就得出不同颜色的风车叶，切割后就有了风车的轮廓。再加一个径向渐变，设置好颜色边界，就得出中心带圆形边框的圆点。多重实体颜色渐变需要使用混合技术，所有背景才能显示，同时，渐变所设计的颜色可能会改变、可能不会渲染出原始颜色。

绿叶清舟

和图片做的一样啊

马黑黑

绿叶清舟 发表于 2024-3-2 13:01
和图片做的一样啊

这个没有折线

绿叶清舟

马黑黑 发表于 2024-3-2 13:06
这个没有折线

改变大小不容易吧，下面的百分比也要动的吧

红影

这个的代码还要简单。真棒

红影

发现css里还是有很多东西要学的呢。这个直接用径向渐变就完成了中间小圆的绘制了。

“如果风车叶需要折线的话，把方法一的 ::before 伪元素用过来最省事。”
然后::after就可以留着做风车的小枝干了

马黑黑

红影 发表于 2024-3-2 15:48
发现css里还是有很多东西要学的呢。这个直接用径向渐变就完成了中间小圆的绘制了。

“如果风车叶需要折 ...

这想法可以

马黑黑

绿叶清舟 发表于 2024-3-2 13:30
改变大小不容易吧，下面的百分比也要动的吧

用百分比做剪裁就是为了随意改变风车的尺寸

马黑黑

红影 发表于 2024-3-2 15:42
这个的代码还要简单。真棒

不过颜色不好控制额

南无月

这个颜色比较沉稳，适合年纪大的儿童。。

马黑黑

南无月 发表于 2024-3-2 17:48
这个颜色比较沉稳，适合年纪大的儿童。。

老儿童

红影

马黑黑 发表于 2024-3-2 17:30
这想法可以

你上一个贴子里，枝干就是用伪元素做的呢

红影

马黑黑 发表于 2024-3-2 17:33
不过颜色不好控制额

说不定能配出更意想不到的漂亮颜色呢

樵歌

俺来玩一玩

马黑黑

樵歌 发表于 2024-3-2 18:54
俺来玩一玩

好的

马黑黑

红影 发表于 2024-3-2 18:30
说不定能配出更意想不到的漂亮颜色呢

那要看个人的摆布能力了

马黑黑

红影 发表于 2024-3-2 18:29
你上一个贴子里，枝干就是用伪元素做的呢

其实用什么都可以的

红影

马黑黑 发表于 2024-3-2 19:38
那要看个人的摆布能力了

有时也是运气，如果正好配到喜欢的，就是运气使然呢

红影

马黑黑 发表于 2024-3-2 19:38
其实用什么都可以的

嗯嗯，只要弄出来，单独设置一样的。