径向渐变背景演示
<style>#mydiv {
width: 400px;
height: 400px;
border: 1px solid gray;
background: radial-gradient(circle at var(--v0), lightblue var(--v1), teal var(--v2)) center/var(--v3) var(--v4);
position: relative;
--v0: 50%; --v1: 0; --v2L 0; --v3: 0; --v4: 0;
}
#resbox, #settingbox, #resbox > p {
margin: 10px 0;
font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.pre { font-size: 16px; }
</style>
<pre class="pre">
以下是<strong>径向渐变背景</strong>演示，其中：
渐变方式锁定为径向渐变 radial-gradient
渐变形状锁定为圆形（circle，默认为椭圆）
渐变颜色锁定为 lightblue 和 teal
background-position 锁定为 center
开放的参数可通过滑块进行设置，不同参数使用不同的颜色标识设置结果
</pre>
<div id="mydiv"></div>
<div id="resbox"></div>
<div id="settingbox"></div>
<script>
const cssVar = [
['--v0', '渐变位置', 'red', 50],
['--v1', '颜色1边界', 'green', 50],
['--v2', '颜色2边界', 'blue', 52],
['--v3', '背景宽度', 'purple', 20],
['--v4', '背景高度', 'magenta', 20]
];
const colorData = (str, color) => `<span style="color: ${color}">${str}</span>`;
(function() {
let hstr = '';
cssVar.forEach((v,k) => {
hstr += `<p>
<label>${cssVar} : </label>
<input type="range" min="0" max="100" value="${cssVar}" step="0.5" />
<output style="color: ${cssVar}">${cssVar}%</output>
</p>`;
mydiv.style.setProperty(cssVar, `${cssVar}%`);
});
settingbox.innerHTML = hstr;
})();
const ranges = document.querySelectorAll('#settingbox input'),
outputs = document.querySelectorAll('#settingbox output');
const mkData = () => `background: radial-gradient(circle at ${colorData(outputs.value, cssVar)}, lightblue ${colorData(outputs.value, cssVar)}, teal ${colorData(outputs.value, cssVar)}) center/${colorData(outputs.value, cssVar)} ${colorData(outputs.value, cssVar)};`;
ranges.forEach((range,key) => {
range.oninput = () => {
outputs.value = range.value + '%';
mydiv.style.setProperty(cssVar,outputs.value);
resbox.innerHTML = mkData();
};
});
resbox.innerHTML = mkData();
</script>
这么好的工具，必须跑来点个赞～108～寓意是圆满，完美，无穷无尽～
玩了好一会儿，形状可以全圆，半圆，毛毛虫连圆～
可以光晕渐变边缘～可以清晰边缘～
可以切成大小随意的洞洞板～
颜色更是无穷尽的变化～
完美小公举～ 今天 看到背景色和圆形色，拉动下面圆形会起变化，很好玩！{:4_199:} 这个太棒了，竟然可以有无数的变化。
通过这个知道上次的小方块是怎么来的了{:4_173:} 除了调两种颜色的百分比，还可以把宽或者高只动一个，去看效果，然后看到那么多不可思议的图形呢。
这个互动工具太赞了{:4_199:} 原来径向渐变可以玩出这么多效果呢{:4_199:} 这工具太实用了{:4_199:} 红影 发表于 2024-7-16 16:43
这工具太实用了
不过它极其有限，不能做更复杂的渐变。其主要作用，是理解一下如下语句个参数的作用：
background: radial-gradient(形状 at 渐变发起位置, 颜色1 分界, 颜色2 分界) 背景位置 / 背景宽度 背景高度; 红影 发表于 2024-7-16 16:42
原来径向渐变可以玩出这么多效果呢
这里还不齐全，还可以玩的更细 南无月 发表于 2024-7-16 15:23
这么好的工具，必须跑来点个赞～108～寓意是圆满，完美，无穷无尽～
{:4_190:} 南无月 发表于 2024-7-16 15:27
玩了好一会儿，形状可以全圆，半圆，毛毛虫连圆～
可以光晕渐变边缘～可以清晰边缘～
可以切成大小随意的 ...
又来小公举{:4_170:} 梦江南 发表于 2024-7-16 15:33
今天 看到背景色和圆形色，拉动下面圆形会起变化，很好玩！
是的{:4_190:} 红影 发表于 2024-7-16 16:38
这个太棒了，竟然可以有无数的变化。
通过这个知道上次的小方块是怎么来的了
是吧？一般来说，这个结构，两个颜色的分界调整得好，就会出现不止是圆的图案 红影 发表于 2024-7-16 16:40
除了调两种颜色的百分比，还可以把宽或者高只动一个，去看效果，然后看到那么多不可思议的图形呢。
这个互 ...
有很多可能有待发现 马黑黑 发表于 2024-7-16 18:07
不过它极其有限，不能做更复杂的渐变。其主要作用，是理解一下如下语句个参数的作用：
background: ra ...
嗯，这个也是最主要的内容{:4_187:} 马黑黑 发表于 2024-7-16 18:07
这里还不齐全，还可以玩的更细
这个已经看到很多变化了，特别好{:4_187:} 马黑黑 发表于 2024-7-16 18:09
是吧？一般来说，这个结构，两个颜色的分界调整得好，就会出现不止是圆的图案
是啊，还有很多别致的图案呢{:4_187:} 马黑黑 发表于 2024-7-16 18:09
有很多可能有待发现
渐变的世界可能性太多，这还只是径向渐变呢{:4_173:} 红影 发表于 2024-7-16 20:55
渐变的世界可能性太多，这还只是径向渐变呢
而且还是不复杂的
页:
[1]
2