css前后对比特效

最新推荐文章于 2024-05-13 17:48:02 发布

小爷很皮

最新推荐文章于 2024-05-13 17:48:02 发布

阅读量292

点赞数

分类专栏：前端升级文章标签： css html html5

本文链接：https://blog.csdn.net/qq_46341900/article/details/120693423

版权

前端升级专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.准备知识

在这里插入图片描述

写在前面的准备知识

filter:

blur(5px)

filter: brightness(0);

100%为原样子

contrast 对比度，对比越大，想应的颜色越亮

drop-shadow 跟box-shadow很像但是可能一些浏览器开启硬件加速

drop-shadow(x y radius color)

grayscale() 灰度 100%全灰

hue-rotate色相旋转，不知道干嘛的

invert(翻转) 不知道干嘛的

下面提一下关于 -webkit-appearance对于浏览器的兼容非常不好，他可以修改系统的默认样式，比如你给< input type=“range” > 设置了以后中间的滑动条会消失，在下面的代码中你想要给-webkit-slider-thumb的默认样式取消，就要给这个伪类加 -webkit-appearance：none;
下面这个的兼容性不是很好，以后可以改一下，将slider直接用div做

下面直接给代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				min-height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.container{
				--height:400px;
				width: 600px;
				height: var(--height);
				border-radius: 4px;
				box-shadow: 0px 0px 4px 2px rgba(0,0,0,.15);
				position: relative;
			}
			.container::before,.container::after{
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				background-image: url(https://img0.baidu.com/it/u=2567670815,24101428&fm=26&fmt=auto);
				width: 100%;
				height: 100%;
				background-size: cover;
			}
			.container::before{
				filter: grayscale(100%);
			}
			.container::after{
				clip-path: inset(0 0 0 var(--slider));
			}
			.slider{
				position: absolute;
				z-index: 100;
				-webkit-appearance: none;
				outline: none;
				background-color: transparent;
				width: 100%;
			}
			
			.slider::-webkit-slider-thumb{
				-webkit-appearance: none;
				width: 14px;
				background: #222222;
				height: var(--height);
				cursor: ew-resize;
			}
		</style>
	<body>
		<div class="container" style="--slider:50%">
			<input type="range" class="slider" min="1" value="50" oninput="this.parentNode.style=`--slider:${this.value}%`" style="0.01">
		</div>
	</body>
</html>

小爷很皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css前后对比特效

1.准备知识写在前面的准备知识filter:blur(5px)filter: brightness(0);100%为原样子contrast 对比度，对比越大，想应的颜色越亮drop-shadow 跟box-shadow很像但是可能一些浏览器开启硬件加速drop-shadow(x y radius color)grayscale() 灰度 100%全灰hue-rotate色相旋转，不知道干嘛的invert(翻转) 不知道干嘛的下面提一下关于 -webkit-appea
复制链接

扫一扫