红影 发表于 2024-8-1 15:36
不这个作业知道对不对
100√
来学习，发现了那个 pencil code ，可以把代码放进去
马黑黑 发表于 2024-8-1 18:32
100√
答对了，开心{:4_205:}
竹溪 发表于 2024-8-1 18:51
来学习，发现了那个 pencil code ，可以把代码放进去
这个我早就推荐的。总共开发了三个版本，在我的网站首页公告栏里有链接。
红影 发表于 2024-8-1 21:08
答对了，开心
应该的
<style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第十三讲：CSS渐变之锥形渐变</h2>
<p>锥形渐变函数写作 <span class="textRed">conic-gradient()</span>，conic 意为圆锥形的，故而汉语称之为锥形渐变；conic又与角的词根同源，且实际渐变效果与角度有直接关系，所以又名角向渐变。我们先来看看锥形渐变的默认效果，下面的 class="cbox1" 盒子的背景使用了锥形渐变，共有三种颜色参与：</p>
<div class="hE"><pre id="pre1">
<style>
.cbox1 {
width: 300px;
height: 300px;
background: conic-gradient(red, green, yellow);
}
</style>
<div class="cbox1"></div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>效果表明：渐变从盒子的中心发起，并以中心为圆心，三种颜色按照顺时针方向绕圆心走一圈；第一个颜色即红色和最后一个颜色即黄色的交界是硬线，硬线的位置为圆心到上边缘中点的连线，可知渐变发起的角度指向12点钟方向，是 0deg。我们可以改变渐变中心和渐变开始的角度，试看：</p>
<div class="hE"><pre id="pre2">
<style>
.cbox2 {
width: 300px;
height: 300px;
background: conic-gradient(from 90deg at 70% 50%, red, green, yellow);
}
</style>
<div class="cbox2"></div>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>仔细看background属性代码，锥形渐函数内加了一个组合参数，<mark>from 90deg</mark> 表示渐变的开始角度从90度开始，硬线指向3点钟方向，<mark>at 70% 50%</mark> 表示渐变的中心在元素的(70%,50%)坐标处。请结合实际效果，感受<span class="textRed">渐变角度</span>、<span class="textRed">渐变中心</span>的设置对锥形渐变的影响。</p>
<p>锥形渐变可以用来设计各种有趣的图案，例如下面，我们用两种颜色来构图，其中的一种颜色头尾各用一次构成上部的颜色区域：</p>
<div class="hE"><pre id="pre3">
<style>
.cbox3 {
width: 300px;
height: 300px;
background: conic-gradient(at 50% 60%, lightblue 20%, skyblue 20% 80%, lightblue 0);
}
</style>
<div class="cbox3"></div>
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>使用锥形渐变做饼状图是小菜一碟，仅需分配好色标数值、将盒子设置为圆形：</p>
<div class="hE"><pre id="pre4">
<style>
.cbox4 {
width: 300px;
height: 300px;
background: conic-gradient(lightblue 10%, teal 10% 45%, plum 45% 78%, cyan 0);
border-radius: 50%
}
</style>
<div class="cbox4"></div>
</pre></div>
<p><button id="btn4" type="button" value="4">点击查看效果</button></p>
<div id="sbox4" class="showDiv"></div>
<p>色标值除了使用百分比标注，还直接支持角度值。试看三等分的饼状图：</p>
<div class="hE"><pre id="pre5">
<style>
.cbox5 {
width: 300px;
height: 300px;
background: conic-gradient(cyan 120deg, teal 120deg 240deg, lightblue 0);
border-radius: 50%
}
</style>
<div class="cbox5"></div>
</pre></div>
<p><button id="btn5" type="button" value="5">点击查看效果</button></p>
<div id="sbox5" class="showDiv"></div>
<p>和其他的渐变一样，锥形渐变渲染出来的图案也可以看成是图片，利用图片背景的特性，我们给渐变做精巧的设计，然后加上背景位置和背景尺寸，可以做出非常实用的效果，比如做一个国际象棋棋盘：</p>
<div class="hE"><pre id="pre6">
<style>
.cbox6 {
width: 300px;
height: 300px;
background: conic-gradient(white 25%, black 25% 50%, white 50% 75%, black 75%) 0 0/25% 25%;
border: 1px solid black;
}
</style>
<div class="cbox6"></div>
</pre></div>
<p><button id="btn6" type="button" value="6">点击查看效果</button></p>
<div id="sbox6" class="showDiv"></div>
<p>重复性锥形渐变函数写成 <span class="textRed">repeating-conic-gradient()</span>，最后一个颜色的终止色标值将表示渐变单元的总尺寸，百分比或角度，该单元将被重复直至铺满整个盒子。请分析以下代码，并结合运行效果尝试理解为什么渐变单元被复制了四次：</p>
<div class="hE"><pre id="pre7">
<style>
.cbox7 {
width: 300px;
height: 300px;
background: repeating-conic-gradient(orange 0deg 30deg, yellow 30deg 60deg, gold 60deg 90deg);
border-radius: 50%;
}
</style>
<div class="cbox7"></div>
</pre></div>
<p><button id="btn7" type="button" value="7">点击查看效果</button></p>
<div id="sbox7" class="showDiv"></div>
<p>上面的效果我们实现了硬线锥形渐变，这里需要注意，在重复性锥形渐变里实现硬线锥形渐变，任何一种颜色的色标最好都给出色标起、始值，不像其他渐变可以省略头尾颜色的一些值。</p>
<p>本节主要介绍锥形渐变的两个函数，<span class="textRed">conic-gradient()</span>和<span class="textRed">repeating-conic-gradient()</span>。锥形渐变生成的渐变效果，默认从12点钟方向开始，参与渐变的颜色绕元素的中心坐标做顺时针方向过渡、形成颜色间的渐变。重复性锥形渐变以最后一个颜色的终止色标值（角度或百分比）作为被复制的渐变单元铺满整个元素。</p>
<p>作业：制作一个400*400的元素，使得两种颜色构成的重复性渐变以10份的形式渲染整个元素，最终的结果达到，① 渐变中心在元素的中央，② 颜色交接浑然天成，渐变次序为121121这样的延续。提示：① 使用重复性锥形渐变很容易完成这个作业；② 颜色虽是两种，在一个渐变单元里可以重复其中的一种颜色。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
马黑黑 发表于 2024-8-1 21:55
应该的
那红红的100，看着就让人心情好{:4_173:}
马黑黑 发表于 2024-8-2 07:24
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
在重复性锥形渐变里实现硬线锥形渐变，任何一种颜色的色标最好都给出色标起、始值，不像其他渐变可以省略头尾颜色的一些值。
记下了。
马黑黑 发表于 2024-8-2 07:24
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
两种颜色构成的重复性渐变以10份的形式渲染整个元素
两种颜色10份，360度上就是占36度，每一种颜色占12度。不知道是不是这样理解。
<style>
.hy7 {
width: 400px;
height: 400px;
background: repeating-conic-gradient( gold 0deg 12deg, yellow 12deg 24deg, gold 24deg 36deg);
border-radius: 50%;
}
</style>
<div class="hy7"></div>
<style>
.hy6 {
width: 300px;
height: 300px;
background: conic-gradient(white 25%, black 25%) 0 0/5% 100%;
border: 1px solid black;
}
</style>
<div class="hy6"></div>
用棋盘做个篱笆，好玩，随意调一下数字，就有不同的效果{:4_173:}
马黑黑 发表于 2024-8-1 21:55
这个我早就推荐的。总共开发了三个版本，在我的网站首页公告栏里有链接。
我是第一次看到啊，还有那么多版本啊，这个里面的就很好用。
竹溪 发表于 2024-8-2 19:32
我是第一次看到啊，还有那么多版本啊，这个里面的就很好用。
这些都是我自己用的，根据我的需求进行维护
红影 发表于 2024-8-2 16:49
用棋盘做个篱笆，好玩，随意调一下数字，就有不同的效果
可能多多
马黑黑 发表于 2024-8-2 19:35
这些都是我自己用的，根据我的需求进行维护
有自己制作的软件，厉害{:5_116:}
本帖最后由 马黑黑 于 2024-8-2 19:42 编辑 <br /><br /><div class="hE"><pre>
<style>
.rc1 {
position: relative;
width: 400px;
height: 400px;
left: calc(50% - 200px);
background: repeating-conic-gradient(orange , gold, orange 10%);
border-radius: 50%;
}
</style>
<div class="rc1"></div>
</pre></div>
红影 发表于 2024-8-2 11:12
.hy7 {
width: 400px;
height: 400px;
100√
不错。再参考一下上一楼的代码
点点关注不迷路{:4_173:}
马黑黑 发表于 2024-8-2 19:35
可能多多
是啊，代码太强大了{:4_187:}