CSS滤镜演示
本帖最后由 马黑黑 于 2024-1-19 20:56 编辑 <br /><br /><style>#mum { font-size: 16px; }
#mum h2 { text-align: center; }
#mum p { margin: 10px 0; }
#pa { margin: auto; padding: 10px; width: 760px; display: grid; grid-template-columns: auto 340px; border: 1px solid gray; }
#fwrap { display: grid; grid-template-columns: 2fr 2fr 1fr; place-items: center; }
#iwrap { text-align: center; }
</style>
<div id="mum">
<h2>CSS Filter 演示</h2>
<div id="pa">
<div id="fwrap">
<label for="txtShadow">drop-shadow 阴影</label>
<input id="txtShadow" type="text" value="4px 4px 16px #ff0000" />
<button id="btnShadow">确定</button>
</div>
<div id="iwrap">
<p><img id="sImage" src="https://638183.freep.cn/638183/web/svg/firefox.svg" alt="" width="80%" height="80%" /></p>
<p><br><br><output id="fMsg">filter:尚未设置</output></p>
</div>
</div>
<p>【说明】</p>
<blockquote>1. CSS滤镜支持复合滤镜，本示例仅演示使用单一滤镜的情形。</blockquote>
<blockquote>2. 单击滤镜名称，滑杆会被选中，可用键盘左右方向键调节相应滤镜数值。</blockquote>
<blockquote>3. 滑杆失去焦点时所有滤镜会自动复位。</blockquote>
<blockquote>4. 阴影滤镜请按文本框示例输入合法的属性值。</blockquote>
<blockquote>5. 支持浮点数的滤镜可使用百分比数值替代浮点数。</blockquote>
</div>
<script>
(function() {
let filters = [
{ name: 'blur', cn: '高斯模糊', min: 0, max: 20, unit: 'px', step:1 },
{ name: 'brightness', cn: '亮度', min: 0, max: 2 },
{ name: 'contrast', cn: '对比度', min: 0, max: 2 },
{ name: 'grayscale', cn: '灰度', min: 0, max: 1 },
{ name: 'hue-rotate', cn: '色相转换', min: 0, max: 360, unit: 'deg', step: 1 },
{ name: 'invert', cn: '反转', min: 0, max: 1 },
{ name: 'opacity', cn: '透明度', min: 0, max: 1 },
{ name: 'saturate', cn: '饱和度', min: 0, max: 2 },
{ name: 'sepia', cn: '深褐色', min: 0, max: 1 },
];
let sFilterMsg = () => fMsg.value = 'filter: ' + sImage.style.filter + ';';
filters.forEach((filter,key) => {
let fId = filter.name, min = filter.min, max = filter.max, value = filter.value || '0', unit = filter.unit || '';
let label = document.createElement('label'), input = document.createElement('input'), output = document.createElement('output');
input.type = "range";
input.id = fId;
input.min = min;
input.max = max;
input.step = filter.step || '0.1';
input.value = '0';
label.setAttribute('for',fId);
label.textContent = fId + ' ' + filter.cn;
output.value = value + unit;
input.oninput = input.onclick = () => {
output.value = input.value + unit;
sImage.style.cssText = `filter: ${fId}(${input.value}${unit})`;
sFilterMsg();
};
input.onblur = () => {
input.value = value;
output.value = value + unit;
sImage.style.cssText = 'filter: unset()';
sFilterMsg();
};
fwrap.appendChild(label);
fwrap.appendChild(input);
fwrap.appendChild(output);
});
btnShadow.onclick = () => {
sImage.style.cssText = `filter: drop-shadow(${txtShadow.value})`;
sFilterMsg();
}
})();
</script>
这个好，效果看着直观。 这个又诗歌特别好的在线可直观看到效果的帖子，一个个试下来，太好了{:4_199:} 阴影也可以直接设置呢，我随意改变个颜色，就能看到。 这个实例图片选得特别好，有红黄蓝及它们的接近色，差不多的颜色都在了。
我总是对用基础颜色的东东色相转换的结果弄不清楚，这里的可以直接看到了{:4_199:} 这又是好想置顶啊。还是我自己收藏一下吧，至少让自己想找的时候能找到它{:4_199:} 这个连吃瓜都 觉得特别有用！ 樵歌 发表于 2024-1-19 21:25
这个连吃瓜都 觉得特别有用！
{:4_172:} 红影 发表于 2024-1-19 21:15
这又是好想置顶啊。还是我自己收藏一下吧，至少让自己想找的时候能找到它
啥都置顶，天有多高呢 起个网名好难 发表于 2024-1-19 20:52
这个好，效果看着直观。
晚上好 红影 发表于 2024-1-19 21:14
这个实例图片选得特别好，有红黄蓝及它们的接近色，差不多的颜色都在了。
我总是对用基础颜色的东东色相转 ...
这是火狐浏览器的大logo，svg格式 马黑黑 发表于 2024-1-19 21:37
啥都置顶，天有多高呢
是啊，你已经抗议过了，我也不敢看到好的就置顶了{:4_189:} 马黑黑 发表于 2024-1-19 21:38
这是火狐浏览器的大logo，svg格式
这个的颜色组合好。 醉美水芙蓉 发表于 2024-1-19 22:36
我觉得红影可以做个代码超链接！
这个我不会呀{:4_173:} 红影 发表于 2024-1-19 22:29
这个的颜色组合好。
也未尽然 红影 发表于 2024-1-19 22:28
是啊，你已经抗议过了，我也不敢看到好的就置顶了
置顶的东东少量就好，不要啥都塞那里 醉美水芙蓉 发表于 2024-1-19 22:37
黑黑老师这个效果非常实用！
感谢支持