css+js实现图片滤镜生成器代码
代码语言：html
所属分类：其他
代码描述：css+js实现图片滤镜生成器代码，可选择左侧不同的参数实时观看右侧效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
<style>
body {
background: #f5f5f5;
font-family: "Plus Jakarta Sans", sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 700;
}
.gallery {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.container {
display: flex;
justify-content: center;
gap: 20px;
}
.filter-range {
display: flex;
flex-direction: column;
align-items: center;
}
#svg-filters {
position: absolute;
}
.card {
margin-top: 24px;
margin-bottom: 24px;
border-radius: 24px;
padding: 24px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
border: none;
}
#search {
border-radius: 24px;
border: none;
padding: 12px;
float: right;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.full {
width: 100%;
position: relative;
height: 600px;
background: #f5f5f5;
border-radius: 24px;
overflow: hidden;
}
#image {
object-fit: cover;
width: 100%;
object-position: center bottom;
}
.card h5 {
margin-bottom: 24px;
}
.buttons {
margin-bottom: 24px;
}
.btn {
border-radius: 24px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
margin: 4px;
}
</style>
</head>
<body>
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<h1>Filter Generator</h1>
</header>
<div class="container-sm">
<div class="row">
<div class="col">
<div class="row d-flex justify-content-center ">
<div class="col-4 my-auto">
<h2>Filters</h2>
</div>
<div class="col-8 my-auto">
<input type="text" id="search" placeholder="Search filters...">
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">CSS Filters</h5>
<div class="buttons">
<button class="btn btn-danger" id="resetStyle">Reset All</button>
<button class="btn btn-light" id="brightStyle">Bright</button>
<button class="btn btn-light" id="oldStyle">Old</button>
<button class="btn btn-light" id="rawStyle">Raw</button>
<button class="btn btn-light" id="nuclearStyle">Nuclear</button>
<button class="btn btn-light" id="creepyStyle">Creepy</button>
</div>
<div class="filter-range" data-filter-name="greyscale">
<label for="greyscale" class="form-label">Greyscale:<span id="greyscale-value">0%</span></label>
<input type="range" value="0" class="form-range" min="0" max="100" id="greyscale">
</div>
<div class="filter-range" data-filter-name="sepia">
<label for="sepia" class="form-label">Sepia:<span id="sepia-value">0%</span></label>
<input type="range" value="0" class="form-range" min="0" max="100" id="sepia">
</div>
<div class="filter-range" data-filter-name="blur">
<label for="blur" class="form-label">Blur:<span id="blur-value">0%</span></label>
<input type="range" value="0" class="form-range" min="0" max="100" id="blur">
</div>
<div class="filter-range" data-filter-name="brightness">
<label for="brightness" class="form-label">Brightness:<span id="brightness-value">0%</span></label>
<input type="range" value="100" class="form-range" min="0" max="200" id="brightness">
</div>
<div class="filter-range" data-filter-name="hue rotate">
<label for="huerotate" class="form-label">Hue Rotate:<span id="huerotate-value">0%</span></label>
<input type="range" value="0" class="form-range" min="0" max="360" id="huerotate">
</div>
<div class="filter-range" data-filter-name="saturate">
<label for="saturate" class="form-label">Saturate:<span id="saturate-value">0%</span></label>
<input type="range" value="100" class="form-range" min="0" max="1000" id="saturate">
</div>
<div class="filter-range" data-filter-name="opacity">
<label for="opacity" class="form-label">Opacity:<span id="opacity-value">0%</span></label>
<input type="range" value="100" class="form-range" min="0" max="100" id="opacity">
</div>
<div class="filter-range" data-filter-name="contrast">
<label for="contrast" class="form-label">Contrast:<span id="contrast-value">0%</span></label>
<input type="range" value="100" class="form-range" min="0" max="1000" id="contrast">
</div>
<div class="filter-range" data-filter-name="invert">
<label for="invert" class="form-label">Invert:<span id="invert-value">0%</span></label>
<input type="range" value="0" class="form-range" min="0" max="100" id="invert">
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">SVG Filters</h5>
<div class="filter-range" data-filter-name="edges">
<label for="svg-edges" class="form-label"><input id="svg-edges-checkbox" type="checkbox"> Sharp Edges:<span id="svg-edges-value">0%</span></label>
<input type="range" class="form-range" min="-2" max="2" step="0.05" id="svg-edges">
</div>
</div>
</div>
</div>
<div class="col">
<div class="full d-flex justify-content-center">
<img id="image" src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png" alt="Sunshine and and a landscape in the distance, photographed from the point of view of a person reclining in a tent, whose shoes are visible in the photo. " title="Photo by Will Truettner for Unsplash. ">
<div id="svg-filters"></div>
</div>
<div class="row d-flex justify-content-center ">
<div class="col-12 mt-5">
<h2>Results</h2>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">CSS</h5>
<span id="result"></span>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">HTML</h5>
<span id="resultHtml"></span>
</div>
</div>
</div>
</div>
</div>
<script>
// JS filter to find a filter
document.getElementById("search").addEventListener("input", function () {
const query = this.value.toLowerCase();
const filters = document.querySelectorAll(".filter-range");
filters.forEach(filter => {
const filterName = filter.getAttribute("data-filter-name").toLowerCase();
if (filterName.includes(query)) {
filter.style.display = "block";
} else {
filter.style..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0