纯CSS绘制风车（四）
<style>.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
#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;
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>
<h2>效果：</h2>
<div id="player"></div>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<div class="tGreen"><cl-cd data-idx="2">/*</cl-cd>
<cl-cd data-idx="3"> 单元素风车 ：两个伪元素做上下风车叶</cl-cd>
<cl-cd data-idx="4"> 采用多边形切割相同的形状，第二个伪元素旋转180度</cl-cd>
<cl-cd data-idx="5">*/</cl-cd></div>
<cl-cd data-idx="6">#player {</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">margin:</span> 20px;</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">width:</span> 300px;</cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">height:</span> 300px;</cl-cd>
<cl-cd data-idx="10"> <span class="tBlue">border:</span> 1px solid gray; <span class="tGreen">/* 边框做观察之用 */</span></cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="12">}</cl-cd>
<cl-cd data-idx="13"><span class="tGreen">/* 伪元素共性 */</span></cl-cd>
<cl-cd data-idx="14">#player::before, #player::after {</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">width:</span> 100%;</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">height:</span> 50%;</cl-cd>
<cl-cd data-idx="19"> <span class="tGreen">/* 两重渐变背景融合成背景图案 */</span></cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">background:</span></cl-cd>
<cl-cd data-idx="21"> repeating-radial-gradient(circle, cyan, tan, cyan 10px),</cl-cd>
<cl-cd data-idx="22"> repeating-linear-gradient(olive, red, olive 10px);</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">background-blend-mode:</span> difference;</cl-cd>
<cl-cd data-idx="24"> <span class="tGreen">/* 切割多边形 ：各点xy坐标值可以调整 */</span></cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">clip-path:</span> polygon(0 100%, 28% 56%, 50% 56%, 50% 0, 72.5% 56%, 72.5% 100%);</cl-cd>
<cl-cd data-idx="26">}</cl-cd>
<cl-cd data-idx="27"><span class="tGreen">/* 第二个伪元素定位+旋转 */</span></cl-cd>
<cl-cd data-idx="28">#player::after {</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">top:</span> 50%;</cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">transform:</span> rotate(180deg);</cl-cd>
<cl-cd data-idx="31">}</cl-cd>
<cl-cd data-idx="32"></<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="33"> </cl-cd>
<cl-cd data-idx="34"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span>></<span class="tDarkRed">div</span>></cl-cd>
</div>
这个不但有原理讲解，还有实例呢{:4_199:} 红影 发表于 2024-3-3 11:21
这个不但有原理讲解，还有实例呢
感觉还是第三个好看 马黑黑 发表于 2024-3-3 11:43
感觉还是第三个好看
各有特色{:4_187:} 红影 发表于 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>
<h2>另一个示例：</h2>
<div class="windmill"></div>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">.windmill {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">margin:</span> 20px;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 300px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 300px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">border:</span> 1px solid gray;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="8">}</cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10">.windmill::before, .windmill::after {</cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">width:</span> 100%;</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">height:</span> 50%;</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">background:</span></cl-cd>
<cl-cd data-idx="16"> linear-gradient(45deg, purple, orange, green),</cl-cd>
<cl-cd data-idx="17"> repeating-radial-gradient(transparent, snow, transparent 1px);</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">background-blend-mode:</span> overlay;</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">clip-path:</span> polygon(0 100%, 28% 56%, 50% 56%, 50% 0, 72.5% 56%, 72.5% 100%);</cl-cd>
<cl-cd data-idx="20">}</cl-cd>
<cl-cd data-idx="21">.windmill::after {</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">top:</span> 50%;</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">transform:</span> rotate(180deg);</cl-cd>
<cl-cd data-idx="24">}</cl-cd>
<cl-cd data-idx="25"> </cl-cd>
<cl-cd data-idx="26"></<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="27"> </cl-cd>
<cl-cd data-idx="28"><<span class="tDarkRed">div</span> class=<span class="tMagenta">"windmill"</span>></<span class="tDarkRed">div</span>></cl-cd>
</div>
马黑黑 发表于 2024-3-3 12:21
.windmill {
margin: 20px;
width: 300px;
这个更美{:4_199:} 换一下线性和径向的颜色，效果就如此不同呢{:4_187:} 红影 发表于 2024-3-3 13:18
换一下线性和径向的颜色，效果就如此不同呢
任意细小的改变，效果可能都会令人意外 红影 发表于 2024-3-3 13:17
这个更美
还好还好 马黑黑 发表于 2024-3-3 13:33
任意细小的改变，效果可能都会令人意外
两种设置方法换一下，也会变化这么大呢。 马黑黑 发表于 2024-3-3 13:34
还好还好
这里的两个都弱化了拼接的接缝线条，看着很好{:4_199:} 红影 发表于 2024-3-3 16:16
两种设置方法换一下，也会变化这么大呢。
这就是神奇之处 红影 发表于 2024-3-3 16:17
这里的两个都弱化了拼接的接缝线条，看着很好
如果足够细心的话，拼接处的色彩可以处理的更好，不会出现拼接痕迹 马黑黑 发表于 2024-3-3 16:17
这就是神奇之处
黑黑用实际效果，让我们看到了神奇{:4_187:} 马黑黑 发表于 2024-3-3 16:19
如果足够细心的话，拼接处的色彩可以处理的更好，不会出现拼接痕迹
这个感觉不那么容易呢{:4_173:} 红影 发表于 2024-3-3 21:10
这个感觉不那么容易呢
这个不是容易不容易的问题，是有木有耐心的问题 红影 发表于 2024-3-3 21:09
黑黑用实际效果，让我们看到了神奇
我做的还不行，不专业 风车这么好看，我必须来点个赞 南无月 发表于 2024-3-3 21:31
风车这么好看，我必须来点个赞
这个一般般 小白觉得实例配教程更接地气儿~~{:4_170:}