3、滤镜（HTML)

最新推荐文章于 2022-12-02 11:46:39 发布

CodeCode!

最新推荐文章于 2022-12-02 11:46:39 发布

阅读量82

点赞数

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

本文链接：https://blog.csdn.net/qq_42847094/article/details/107980158

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 400px;
				height: auto;
				display: block;
				margin: 0 auto;
				transition: all 3s;
			}
			img:hover{
				-webkit-filter: none;
			}
			.img1{
				/*滤镜属性
				 grayscale 设置灰度，1百分百 ，0 百分0
				 * */
				-webkit-filter: grayscale(1);
			}
			.img2{
				/*滤镜属性
				 brightness:亮度,默认值是1，正常亮度
				 * */
				-webkit-filter: brightness(2);
			}
			.img3{
				/*褐色属性
				  sepia：1百分之百褐色，正常为0
				  */
				-webkit-filter: sepia(1);
			}
			.img4{
				/*模糊度
				  blur:单位像素
				 * */
				-webkit-filter: blur(50px);
			}
			.img5{
				/*对比度
				 contrast:对比度，正常就是1，如果调成0，就没有任何对比度，变为灰色
				 * */
				-webkit-filter: contrast(2);
			}
			.img6{
				/*饱和度
				 saturate 数值越大越艳
				 * */
				-webkit-filter: saturate(3);
			}
			.img7{
				/*色相旋转
				 
				 * */
				-webkit-filter: hue-rotate(0deg);
			}
			.img8{
				-webkit-filter: blur(10px) brightness(10) grayscale(1);
				transform: all 15s;
			}
			.img8:hover{
				-webkit-filter: blur(0px) brightness(1) grayscale(1);
			}
		</style>
	</head>
	<body>
		<img class="img1" src="img/hejong.jpg"/>
	</body>
	<img class="img2" src="img/hejong.jpg"/>
	<img class="img3" src="img/hejong.jpg"/>
	<img class="img4" src="img/hejong.jpg"/>
	<img class="img5" src="img/hejong.jpg"/>
	<img class="img6" src="img/hejong.jpg"/>
	<img class="img7" src="img/hejong.jpg"/>
	<img class="img8" src="img/hejong.jpg"/>
	
	</body>
</html>

CodeCode!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3、滤镜（HTML)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ width: 400px; height: auto; display: block; margin: 0 auto; transition: all 3s; }.
复制链接

扫一扫