HTML+CSS+JS实现 ❤️从亮到暗图片滤镜特效❤️

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

:root {--linear-deg: 90deg;--color_one_rgb: 255;--color_two_rgb: 255;--color_three_rgb: 255;--color_one_opacity: 0.2;--start: 0%;--color_four_rgb: 10;--color_five_rgb: 0;--color_six_rgb: 94;--color_two_opacity: 1;--end: 100%;/* Special Variables */--url: url("https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg");--font-color: #fff;--font-size: 6vw;--blend-mode: screen;--animation-speed: 5s;--transition: ease;
}body {background: var(--url);background-size: cover;background-repeat: no-repeat;font-family: sans-serif;height: 100vh;width: 100%;overflow: hidden;margin: 0;padding: 0;
}.main {height: 100%;width: 100%;background: linear-gradient( var(--linear-deg), rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start), rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));position: relative;display: flex;justify-content: center;align-items: center;animation: Infite var(--animation-speed) var(--transition) infinite;-webkit-animation: Infite var(--animation-speed) var(--transition) infinite;-moz-animation: Infite var(--animation-speed) var(--transition) infinite;background-size: 125% 125%;
}@-webkit-keyframes Infite {0% {background-position: 0% 97%}50% {background-position: 100% 4%}100% {background-position: 0% 97%}
}@-moz-keyframes Infite {0% {background-position: 0% 97%}50% {background-position: 100% 4%}100% {background-position: 0% 97%}
}@keyframes Infite {0% {background-position: 0% 97%}50% {background-position: 100% 4%}100% {background-position: 0% 97%}
}h1 {color: var(--font-color);font-size: var(--font-size);border: .5vw solid black;padding: 0.5rem 1rem;
}.blend {mix-blend-mode: var(--blend-mode);
}.form_container {position: absolute;bottom: 0;right: 0;top: 0;display: flex;flex-direction: column;gap: 1rem;padding: 0.5rem 2rem;background: rgba( 255, 255, 255, 0.55);background: rgba( 255, 255, 255, 0.3);box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);backdrop-filter: blur( 20px);-webkit-backdrop-filter: blur( 20px);border-radius: 1rem 0 0 1rem;width: 250px;overflow: auto;
}.formgroup {width: 100%;
}.description {width: auto;padding: 0.2rem 0;font-weight: 600;font-size: 1rem;
}h2 {position: relative;font-weight: 700;margin: 0.5rem 0;padding: 0;font-size: 1.3rem;flex: 100%;
}h2::after {content: "";position: absolute;width: 25px;max-width: 200px;bottom: 0;left: 5rem;height: 25px;border-radius: 50%;
}#titelColorOne::after {background: rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), 1) var(--start);
}#titelColorTwo::after {background: rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), 1) var(--end);
}.slider {-webkit-appearance: none;width: 50%;border-radius: 1rem;height: 10px;background: #e0e0e0;box-shadow: inset 7px 7px 14px #bebebe, inset -7px -7px 14px #ffffff;outline: none;opacity: 0.7;-webkit-transition: .2s;transition: opacity .2s;
}.slider:hover {opacity: 1;
}.slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 15px;height: 15px;border-radius: 1rem;border: 1px solid white;background: linear-gradient( var(--linear-deg), rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start), rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));cursor: pointer;
}.slider::-moz-range-thumb {width: 15px;height: 15px;linear-gradient( var(--linear-deg),rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start),rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));cursor: pointer;
}#colorSelect {width: 50%;margin: 0;padding: 0;font-weight: 600;background: #fff;cursor: pointer;
}.input {width: 100%;margin: 0;padding: .5rem 0;font-weight: 600;background: #fff;cursor: pointer;
}::-webkit-scrollbar {width: 10px;
}/* Track */::-webkit-scrollbar-track {background: #f1f1f1;
}/* Handle */::-webkit-scrollbar-thumb {background: #888;
}/* Handle on hover */::-webkit-scrollbar-thumb:hover {background: #555;
}summary {font-size: 1.3rem;font-weight: 700;cursor: pointer;margin: 0.5rem 0 0 0;
}@media only screen and (max-width: 1000px) {.form_container {bottom: 0;left: 0;right: 0;width: 0%;top: 70%;flex-direction: row;border-radius: 1rem 1rem 0 0;width: 90%;}.formgroup {overflow-y: auto;overflow-x: hidden;}
}@media only screen and (max-width: 600px) {body {height: 100%;overflow: auto;width: 100%;}.blend {height: 100vh;width: 100%;display: flex;justify-content: center;align-items: center;}.main {flex-direction: column;width: 100%;}.form_container {width: 80%;position: static;flex-direction: column;border-radius: 1rem 1rem 0 0;height: 100%;background: white;justify-content: center;align-items: center;}.formgroup {height: 100%;width: 90%;border: 4px solid black;padding: 0.5rem 1rem;border-radius: 1rem;}
}

HTML和JavaScript代码 :

A<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Light to Dark | Play with Gradient &amp; Mix-Blend-Mode</title><link rel="stylesheet" href="css/style.css"></head><body><div class="main"><div class="blend"><h1>从亮到暗</h1></div><div class="form_container"><div class="formgroup"><h2 id="titelColorOne">Color 1</h2><div class="description">R</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="one"><span id="one_value">255</span><br><div class="description">G</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="two"><span id="two_value">255</span><br><div class="description">B</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="three"><span id="three_value">255</span><br><div class="description">A</div><input class="slider" type="range" min="0" max="1" step="0.1" value="0.2" id="opacity_one"><span id="opacity_one_value">0.2</span><br><div class="description">Startpoint</div><input class="slider" type="range" min="0" max="100" step="1.0" value="0" id="start"><span id="start_value">0</span></div><div class="formgroup"><h2 id="titelColorTwo">Color 2</h2><div class="description">R</div><input class="slider" type="range" min="0" max="255" step="1.0" value="10" id="four"><span id="four_value">10</span><br><div class="description">G</div><input class="slider" type="range" min="0" max="255" step="1.0" value="0" id="five"><span id="five_value">0</span><br><div class="description">B</div><input class="slider" type="range" min="0" max="255" step="1.0" value="94" id="six"><span id="six_value">94</span><br><div class="description">A</div><input class="slider" type="range" min="0" max="1" step="0.1" value="1" id="opacity_two"><span id="opacity_two_value">1</span><br><div class="description">Endpoint</div><input class="slider" type="range" min="0" max="100" step="1.0" value="100" id="end"><span id="end_value">100%</span></div><div class="formgroup"><h2>DEG & Blend-Mode</h2><div class="description">DEG</div><input class="slider" type="range" min="0" max="360" step="1.0" value="90" id="deg"><span id="deg_value">90deg</span><div class="description">Mix-Blend-Mode</div><select name="mix-blend" class="input" id="mixBlend"><option value="normal">normal</option><option value="multiply">multiply</option><option value="screen">screen</option><option value="overlay">overlay</option><option value="darken">darken</option><option value="lighten">lighten</option><option value="color-dodge">color-dodge</option><option value="color-burn">color-burn</option><option value="hard-light">hard-light</option><option value="soft-light">soft-light</option><option value="difference">difference</option><option value="exclusion">exclusion</option><option value="hue">hue</option><option value="saturation">saturation</option><option value="color">color</option><option value="luminosity">luminosity</option><option value="initial">initial</option><option value="inherit">inherit</option><option value="unset">unset</option></select><details><summary>More</summary><br><div class="description">Font Color</div><input type="color" value="" id="colorSelect"><br><div class="description">FontSize</div><input class="slider" type="range" min="0" max="10" step="0.25" value="3" id="fontSize"><span id="font_value">3vw</span><div class="description">Transition</div><select name="transition" class="input" id="transition"><option value="ease">ease</option><option value="linear">linear</option><option value="ease-in-out">ease-in-out</option><option value="ease-in">ease-in</option><option value="ease-out">ease-out</option></select><div class="description">Animation Speed</div><input class="slider" type="range" min="0.5" max="20" step="0.25" value="5" id="speed"><span id="speed_value">5s</span><br><div class="description">Backgorund Image Url</div><input type="url" value="img/fh.jpg" class="input" id="urlInput"></p></details></div></div></div><script src="js/script.js"></script></body></html>

上面的script.js文件需要引入进来