查看: 491|回复: 28

[活动] 【凡哥教程第十三讲作业】双色转盘(CSS渐变之锥形渐变)

[复制链接]
发表于 2024-8-2 09:33 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-8-2 09:34 编辑

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


评分

5

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-2 09:33 | 显示全部楼层
<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>

评分

1

查看全部评分

点评
回复

使用道具

发表于 2024-8-2 09:38 | 显示全部楼层
静静十一的作业看了半天没看懂,换颜色在那个地方,我换了颜色封口就没了,求助
点评
回复

使用道具

发表于 2024-8-2 09:39 | 显示全部楼层
静静作业又出来了,我也跟不上节奏了
点评
回复

使用道具

 楼主| 发表于 2024-8-2 09:40 | 显示全部楼层
@凡哥
原来是理解题意的问题。。
这个作业已经批改了两次,现在是这样
辛苦老师看看这一稿行不。。
点评
回复

使用道具

发表于 2024-8-2 12:02 | 显示全部楼层

实现方法没毛病,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>

评分

1

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-2 12:35 | 显示全部楼层

评分

1

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-2 12:38 | 显示全部楼层
lightblue , skyblue, lightblue 10%
一个单元可以这样混在一起给个10%。太帅了。。
这个老师不给示范打S也生不出来的哈。。

评分

1

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-2 12:39 | 显示全部楼层
本帖最后由 花简静 于 2024-8-2 12:56 编辑
凡哥 发表于 2024-8-2 12:02
实现方法没毛病,100√。再参考一下下面的做法:

&lt;style&gt;


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

使用道具

发表于 2024-8-2 14:02 | 显示全部楼层
静静作业越来越难了,感觉已经超出我的认知做不出来了
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-10 04:18

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表