纯CSS绘制风车（四）

马黑黑

效果：

代码

<style>

/*     单元素风车 ：两个伪元素做上下风车叶     采用多边形切割相同的形状，第二个伪元素旋转180度 */

#player {     margin: 20px;     width: 300px;     height: 300px;     border: 1px solid gray; /* 边框做观察之用 */     position: relative; } /* 伪元素共性 */ #player::before, #player::after {     position: absolute;     content: '';     width: 100%;     height: 50%;     /* 两重渐变背景融合成背景图案 */     background:         repeating-radial-gradient(circle, cyan, tan, cyan 10px),         repeating-linear-gradient(olive, red, olive 10px);     background-blend-mode: difference;     /* 切割多边形 ：各点xy坐标值可以调整 */     clip-path: polygon(0 100%, 28% 56%, 50% 56%, 50% 0, 72.5% 56%, 72.5% 100%); } /* 第二个伪元素定位+旋转 */ #player::after {     top: 50%;     transform: rotate(180deg); } </style>   <div id="player"></div>

红影

这个不但有原理讲解，还有实例呢

马黑黑

红影 发表于 2024-3-3 11:21
这个不但有原理讲解，还有实例呢

感觉还是第三个好看

红影

马黑黑 发表于 2024-3-3 11:43
感觉还是第三个好看

各有特色

马黑黑

红影 发表于 2024-3-3 12:18 各有特色

另一个示例：

代码

<style> .windmill {     margin: 20px;     width: 300px;     height: 300px;     border: 1px solid gray;     position: relative; }   .windmill::before, .windmill::after {     position: absolute;     content: '';     width: 100%;     height: 50%;     background:         linear-gradient(45deg, purple, orange, green),         repeating-radial-gradient(transparent, snow, transparent 1px);     background-blend-mode: overlay;     clip-path: polygon(0 100%, 28% 56%, 50% 56%, 50% 0, 72.5% 56%, 72.5% 100%); } .windmill::after {     top: 50%;     transform: rotate(180deg); }   </style>   <div class="windmill"></div>

红影

马黑黑 发表于 2024-3-3 12:21
.windmill {
        margin: 20px;
        width: 300px;

这个更美

红影

换一下线性和径向的颜色，效果就如此不同呢

马黑黑

红影 发表于 2024-3-3 13:18
换一下线性和径向的颜色，效果就如此不同呢

任意细小的改变，效果可能都会令人意外

马黑黑

红影 发表于 2024-3-3 13:17
这个更美

还好还好

红影

马黑黑 发表于 2024-3-3 13:33
任意细小的改变，效果可能都会令人意外

两种设置方法换一下，也会变化这么大呢。

红影

马黑黑 发表于 2024-3-3 13:34
还好还好

这里的两个都弱化了拼接的接缝线条，看着很好

马黑黑

红影 发表于 2024-3-3 16:16
两种设置方法换一下，也会变化这么大呢。

这就是神奇之处

马黑黑

红影 发表于 2024-3-3 16:17
这里的两个都弱化了拼接的接缝线条，看着很好

如果足够细心的话，拼接处的色彩可以处理的更好，不会出现拼接痕迹

红影

马黑黑 发表于 2024-3-3 16:17
这就是神奇之处

黑黑用实际效果，让我们看到了神奇

红影

马黑黑 发表于 2024-3-3 16:19
如果足够细心的话，拼接处的色彩可以处理的更好，不会出现拼接痕迹

这个感觉不那么容易呢

马黑黑

红影 发表于 2024-3-3 21:10
这个感觉不那么容易呢

这个不是容易不容易的问题，是有木有耐心的问题

马黑黑

红影 发表于 2024-3-3 21:09
黑黑用实际效果，让我们看到了神奇

我做的还不行，不专业

南无月

风车这么好看，我必须来点个赞

马黑黑

南无月 发表于 2024-3-3 21:31
风车这么好看，我必须来点个赞

这个一般般

南无月

小白觉得实例配教程更接地气儿~~