角向渐变动态特效

马黑黑 · 发表于 2022-3-30 12:27

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-3-30 12:34

这里用到了CSS的重复性角向渐变，repeating-conic-gradient，配置少量几个颜色，将角度设置的很小，比如 0.xdeg，就会出现上图效果。上图的代码极其简单：

<style type="text/css">
.ccBox { 
   width:  760px;
   height: 560px;
   background: repeating-conic-gradient(#eee, #111,#eee 0.1deg);
}
</style>

<div class="ccBox"></div>

马黑黑 · 发表于 2022-3-30 12:40

本帖最后由马黑黑于 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>

复制代码

马黑黑 · 发表于 2022-3-30 12:46

马黑黑 · 发表于 2022-3-30 12:47

上一楼的代码：

<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>

复制代码

加林森 · 发表于 2022-3-30 12:48

慢慢来学习。

马黑黑 · 发表于 2022-3-30 13:18

本帖最后由马黑黑于 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);