【凡哥教程第十三讲作业】双色转盘（CSS渐变之锥形渐变）

花简静

凡哥教程第十三讲作业：制作一个400*400的元素，使得两种颜色构成的重复性渐变以10份的形式渲染整个元素，最终的结果达到，① 渐变中心在元素的中央，② 颜色交接浑然天成，渐变次序为121121这样的延续。提示：① 使用重复性锥形渐变很容易完成这个作业；② 颜色虽是两种，在一个渐变单元里可以重复其中的一种颜色。

花简静

<style> .qsfg13 {     position: relative; width: 400px; height: 400px; left: calc(50% - 200px);     background: repeating-conic-gradient(at 50% 50%, lightblue 18deg, skyblue 18deg 36deg, lightblue 36deg 54deg );     border-radius: 50%; } </style>   <div class="qsfg13"></div>

清梦

静静十一的作业看了半天没看懂，换颜色在那个地方，我换了颜色封口就没了，求助

清梦

静静作业又出来了，我也跟不上节奏了

花简静

@凡哥
原来是理解题意的问题。。
这个作业已经批改了两次，现在是这样
辛苦老师看看这一稿行不。。

凡哥

实现方法没毛病，100√。再参考一下下面的做法：

<style>
.qsfg13 {
    position: relative;
    width: 400px;
    height: 400px;
    left: calc(50% - 200px);
    background: repeating-conic-gradient(lightblue , skyblue, lightblue 10%); /* 渐变单元色标终止值 10% */
    border-radius: 50%;
}
</style>
 
<div class="qsfg13"></div>

花简静

花简静

lightblue , skyblue, lightblue 10%
一个单元可以这样混在一起给个10%。太帅了。。
这个老师不给示范打S也生不出来的哈。。

花简静

凡哥 发表于 2024-8-2 12:02
实现方法没毛病，100√。再参考一下下面的做法：

&lt;style&gt;

这个过渡的太自然了吧。。挺有立体感的。这个图形我好象见过

柒玥

静静作业越来越难了，感觉已经超出我的认知做不出来了