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

java奥斯卡
1,000 阅读4分钟

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的# HTML+CSS+JS实现3亮到暗图片滤镜特效网页设计制作，画面精明  

 效果演示： 

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

 打卡 文章 更新  33 /  100天

大家可以点赞、收藏、关注、评论我啦 ！

在这里插入图片描述

avatar
文章
阅读
粉丝