角向渐变动态特效
<style type="text/css">#conicBox {
width:760px;
height: 560px;
background: repeating-conic-gradient(#eee, #111,#eee 30deg);
}
</style>
<div id="conicBox"></div>
<script language="javascript">
let conic = document.getElementById('conicBox');
let step = 0.1;
let tt = 30;
let flag = true;
setInterval(function() {
if(tt <= 0.1) flag = false;
if(tt >= 30) flag = true ;
if(flag) {
step = -0.1;
} else {
step = 0.1;
}
tt = tt +step;
conic.style.background = `repeating-conic-gradient(#eee, #111,#eee ${tt}deg)`;
}, 60);
</script>
<style type="text/css">
.ccBox {
width:760px;
height: 560px;
background: repeating-conic-gradient(#eee, #111,#eee 0.1deg);
}
</style>
<div class="ccBox"></div>
<div style="line-height: 20px;font-size: 16px;">
<p><br>这里用到了CSS的重复性角向渐变，repeating-conic-gradient，配置少量几个颜色，将角度设置的很小，比如 0.xdeg，就会出现上图效果。上图的代码极其简单：</p>
<p><br></p>
<pre><style type=<span style="color: magenta">"text/css"</span>>
<span style="color: red;">.ccBox </span>{
<span style="color: blue;"> width</span>:760px;
<span style="color: blue;"> height</span>: 560px;
<span style="color: blue;"> background</span>: repeating-conic-gradient(#eee, #111,#eee 0.1deg);
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"ccBox"</span>><<span style="color: darkred">/div</span>>
</pre>
</div> 本帖最后由 马黑黑 于 2022-3-30 12:42 编辑
一楼的代码<style type="text/css">
#conicBox {
width:760px;
height: 560px;
background: repeating-conic-gradient(#eee, #111,#eee 30deg);
}
</style>
<div id="conicBox"></div>
<script language="javascript">
let conic = document.getElementById('conicBox');
let step = 0.1;
let tt = 30;
let flag = true;
setInterval(function() {
if(tt <= 0.1) flag = false;
if(tt >= 30) flag = true ;
if(flag) {
step = -0.1;
} else {
step = 0.1;
}
tt = tt +step;
conic.style.background = `repeating-conic-gradient(#eee, #111,#eee ${tt}deg)`;
}, 60);
</script>
<style>
#circleDiv {
width: 600px;
height: 600px;
border-radius: 50%;
background: #eee;
box-shadow: 2px 2px 4px #666;
}
</style>
<div id="circleDiv"></div>
<script language="javascript">
let aa = 15;
let bgStr = "repeating-conic-gradient(";
for(j=0; j<360/aa; j++) {
bgStr += getColor() + " " + j*aa +"deg " + ( j*aa+aa) + "deg,";
}
bgStr = bgStr.slice(0, bgStr.length-1);
bgStr += ")";
document.getElementById('circleDiv').style.background = bgStr;
function getColor() {
return(`#${Math.random().toString(16).substr(-6)}`);
}
</script>
上一楼的代码：<style>
#circleDiv {
width: 600px;
height: 600px;
border-radius: 50%;
background: #eee;
box-shadow: 2px 2px 4px #666;
}
</style>
<div id="circleDiv"></div>
<script language="javascript">
let aa = 15;
let bgStr = "repeating-conic-gradient(";
for(j=0; j<360/aa; j++) {
bgStr += getColor() + " " + j*aa +"deg " + ( j*aa+aa) + "deg,";
}
bgStr = bgStr.slice(0, bgStr.length-1);
bgStr += ")";
document.getElementById('circleDiv').style.background = bgStr;
function getColor() {
return(`#${Math.random().toString(16).substr(-6)}`);
}
</script>
慢慢来学习。{:4_190:} 本帖最后由 马黑黑 于 2022-3-30 13:20 编辑
四楼效果的实现原理：
利用重复性角向渐变绘制 div 盒子的背景。因为要使用的颜色种类及颜色数量是不确定的，人工编写将会很困难，所以借助JS的高效率来完成。为了方便，先定义一个变量 aa ，由它的值来决定往圆盘里塞进多少个色条。aa的取值应尽量不要太大，60以内比较好，因为圆周是360度，我们要均匀的摆放色条，得用 360/aa 得出颜色条数量，如果设置 aa 为 360 则只能放一个色块。
js的for语句就是从 0 开始，循环到 360/aa 时跳出循环，循环过程中，步进变量 j 每完成一次循环自动加 1 （j++），每次循环要做的事情是给变量 bgStr 追加字串，所加的字串都是围绕着角向渐变展开：
当然，循环之前，需要设计一个变量，bgStr字符串变量，给它一个描述角向渐变的字符：
let bgStr = "repeating-conic-gradient(";
然后才进入循环体干活：
首先，用自定义函数 getColor() 获得一个随机颜色；
其次，按照角向渐变语法规范，加一个空格；
最后，j*aa + "deg" 得出该颜色的起始角度（现实位置在圆心处），( j*aa+aa) + "deg," 得出该颜色的终止弧度（现实位置在圆周处），注意终结弧度的书写格式，j*aa 之前有一个空格，deg 之后有一个小角逗号，这是角向渐变的语法规范。
循环结束之后，还要加工一下 bgStr 变量，先把最后一个小角逗号删掉（最后一个颜色不能有逗号），再补充一个结束小括号。
下面的角向渐变CSS语句有助于理解以上的解释，它将得出对称的6组色条:
background: repeating-conic-gradient(red 0deg 30deg, gray 30deg 60deg, pink 60deg 90deg, black 90deg 120deg, olive 120deg 150deg, tomato 150deg 180deg); 加林森 发表于 2022-3-30 12:48
慢慢来学习。
这个不太好理解哦 马黑黑 发表于 2022-3-30 13:23
这个不太好理解哦
所以我才说慢慢学习，慢慢理解哦。 角向渐变能实现如此美妙的对称效果呢{:4_199:} 以前学过线性渐变和径向渐变，现在又学个角向渐变。前两者都是从某个地方起始然后渐变，而角向的这个ji个例子都是从中心开花呢。 一楼用动态给出了0.1到30度内所有角度变化时的样子，二楼的效果是最小角时的状态吧。
这些对称图案好美的{:4_199:} 四楼给出了15度一个划分的24组色条，随机取的颜色倒是没有重色的，很神奇{:4_173:} <style type="text/css">
.shiyan {
margin: 10px auto;
width:400px;
height: 400px;
border-radius: 50%;
background: repeating-conic-gradient(#ffffcc, #990000,#ffffcc 0.1deg);
}
</style>
<div class="shiyan"></div> <style type="text/css">
.shiyan1 {
margin: 10px auto;
width:400px;
height: 400px;
border-radius: 50%;
background: repeating-conic-gradient(#ffffcc, #990000,#ffffcc 30deg);
}
</style>
<div class="shiyan1"></div> 马黑黑 发表于 2022-3-30 13:18
四楼效果的实现原理：
利用重复性角向渐变绘制 div 盒子的背景。因为要使用的颜色种类及颜色数量是不确 ...
这些颜色中看不出渐变的感觉了呢。看起来像一楼那样只取两个颜色感觉渐变更明显。 神奇的效果 {:4_187:} 红影 发表于 2022-3-30 15:23
四楼给出了15度一个划分的24组色条，随机取的颜色倒是没有重色的，很神奇
你个学霸，。。被学渣嫉妒了，哼 <style>
#sedai {
margin: 10px auto;
width: 500px;
height: 500px;
border-radius: 50%;
background: #FFC1C1;
box-shadow: 2px 2px 4px #666;
}
</style>
<div id="sedai"></div>
<script language="javascript">
let ss = 30;
let bgStr1 = "repeating-conic-gradient(";
for(j=0; j<360/ss; j++) {
bgStr1 += getColor() + " " + j*ss +"deg " + ( j*ss+ss) + "deg,";
}
bgStr1 = bgStr1.slice(0, bgStr1.length-1);
bgStr += ")";
document.getElementById('sedai').style.background = bgStr1;
function getColor() {
return(`#${Math.random().toString(16).substr(-6)}`);
}
</script> 红影 发表于 2022-3-30 15:45
#sedai {
margin: 10px auto;
width: 500px;
感觉初始色应该在3点钟方向的下面，为什么觉得多加了一个aa的位置上了，换色后还是如此。