css3滤镜

最新推荐文章于 2024-01-16 21:03:31 发布
最新推荐文章于 2024-01-16 21:03:31 发布
阅读量80 收藏 4
点赞数 7
分类专栏： 唯唯同学布置的作业好好学习吧!!! 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46474458/article/details/117438057
版权

跟着唯唯同学的步伐别走丢哦!!!

<!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;
				/* 小手 */
				cursor: pointer;
			}
			.img1{
				/*
				 滤镜属性
				 grayscale:设置灰度,1是百分之百,0是百分之0
				 
				 */
				-webkit-filter: grayscale(1);
				/* 过度效果 */
				
			}
			.img2{
				/* 
				 滤镜属性
				 brightness:亮度,默认值是1正常亮度,值是0全黑,2是暴晒效果
				 */
				-webkit-filter: brightness(2);
			}
			.img3{
				/* 
				滤镜属性
				 sepia褐色,1是百分之百褐色,正常为0
				 */
				-webkit-filter: sepia(1);
			}
			.img4{
				/* 
				 滤镜属性
				 blur模糊度:单位像素
				 */
				-webkit-filter: blur(3px);
			}
			.img5{
				/*
				 滤镜属性
				 contrast对比度:1是正常显示,如果调成0,就没有任何对比度,变为灰色
				 */
				-webkit-filter: contrast(0);
			}
			.img6{
				/*
				 滤镜属性
				 saturate饱和度:1是正常显示,如果调成0,就没有任何对比度,变为灰色
				 */
				-webkit-filter: saturate(2);
			}
			.img7{
				/* 胶片底色效果 */
				-webkit-filter: invert(1);
			}
			.img8{
				/* 色相旋转,调到360deg就调回到初始图片了 */
				-webkit-filter:hue-rotate(90deg) ;
			}
			
			
			/* 通过滤镜像画出的效果一样 */
			.img9{
				-webkit-filter: blur(10px) brightness(10) grayscale(1);
				transition: all 10s;
			}
			.img9:hover{
				-webkit-filter: blur(0px) brightness(1) grayscale(1);
			}
		</style>
	</head>
	<body>
		<!-- 本地图片 -->
		第一张<img class="img1" src="img/zw.jpg" ><br>
		第二张<img class="img2" src="img/zw.jpg" ><br>
		第三张<img class="img3" src="img/zw.jpg" ><br>
		第四张<img class="img4" src="img/zw.jpg" ><br>
		第五张<img class="img5" src="img/zw.jpg" ><br>
		第六张<img class="img6" src="img/zw.jpg" ><br>
		第七张<img class="img7" src="img/zw.jpg" ><br>
		第八张<img class="img8" src="img/zw.jpg" ><br>
		第九张<img class="img9" src="img/zw.jpg" ><br>
	</body>
</html>

在这里插入图片描述

呆呆敲代码丫
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS3的滤镜
weixin_62343228的博客
11-04 382
CSS3的滤镜CSS3的滤镜1.什么是滤镜2.滤镜的实现3.常用的滤镜函数（1）模糊效果（blur（））（2）图像亮度（brightness（））（3）图像的对比度（contrast（））（4）阴影效果（drop-shadow（））（5）将图像转化为灰度（grayscale（））（6）图像的反转（invert（））（7）透明度（opacity（））（8）棕褐色效果（sepia（））（9）图像的饱和度（saturate（）） CSS3的滤镜 1.什么是滤镜 CSS3滤镜是对图像等图形元素执行视觉效果的操作，如
CSS3的滤镜filter属性
weixin_30493401的博客
08-24 163
css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。 一、blur(px)高斯模糊 二、brightness(%)亮度 三、contrast(%)对比度 四、drop-shadow()阴影 注意： 这个 drop-shadow 与 box-shadow 都是在说...
遇见CSS3滤镜
huobengle
12-26 113
译自：http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/Jeffrey Way于2011年12月22日 译者：蒋宇捷（转载请标明出处-http://blog.csdn.net/hfahe） ------教程详细内容• 主题：CSS滤镜• 可用性： Webkit每晚构建的版本• 酷炫程度：1...
CSS3 滤镜
weixin_30872789的博客
04-07 74
了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生，CSS3对各种滤镜效果有了支持，可以做出很多好玩儿效果，走马观花了解一下 语法 filter: function(param); 很很多CSS3属性一样，监狱支持情况需要使用浏览器前缀，CSS滤镜支持的方法有 grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert...
一个不错的css3滤镜网页特效
11-24
在现代网页设计中，CSS3已经成为了一种强大的工具，它为开发者提供了许多创新的功能和特性，其中滤镜（Filters）是提升网页视觉效果的重要一环。"一个不错的css3滤镜网页特效"这个主题，主要关注如何利用CSS3滤镜来...
纯CSS3滤镜实现的波光粼粼水面动画特效源码.zip
11-20
【标题】中的“纯CSS3滤镜实现的波光粼粼水面动画特效源码”表明这是一个使用CSS3滤镜技术创建的水面波动动画效果。在Web开发中，CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和...
css3 滤镜
web_hj的博客
04-25 204
1.图像转换为灰度图像 <img src='../../images/a.png' class='pic'> .pic{ filter: grayscale(100%); //数值越大 灰度效果越明显 100%则完全转为灰度图像 0%图像无变化 } 2.高斯模糊 <img src='../../images/a.png' class='pic'> ...
CSS3滤镜
DGL_CSDN的博客
08-31 278
1 滤镜 之前我们要处理一张图片的取色，模糊，褐色等效果必须使用 Photoshop 处理完后保存多张图片，而 CSS3 滤镜的出现使我们在网站中想要轻松实现这些效果变得可能。只需要通过 filter 滤镜的各种属性就能轻松实现，如：grayscale(灰色)、sepia(褐色)、saturate(饱和度)、blur(模糊)…等 1.1 定义和使用 filter 属性定义了元素(通常是 img)的可视效果(例如：模糊与饱和度)。 filter 滤镜，借鉴了 Photoshop 的滤镜效果，在 p
css3的滤镜
m0_53644435的博客
10-27 187
目录 一、滤镜是什么？ 二、滤镜的实现：filter属性 1.模糊效果： 2.设置图像的亮度 3.图像的对比度 4.阴影效果 5.其他属性 一、滤镜是什么？ 对图像、图像进行的视觉处理(模糊、饱和度、对比度等) 二、滤镜的实现：filter属性 1.模糊效果： blur(number),number越大图像越模糊 2.设置图像的亮度 brightness(number)，number越大图像越亮,number不能取负值。可以是整数也可以是百分比 3.图像的对比度...
css3 filter滤镜
in1tial的博客
08-29 777
css3滤镜用法 本来看网上说支持的浏览器不多而且只有webkit浏览器支持。所以在写滤镜是要添加 -webkit-前缀 笔者尝试在win10 edge浏览器同样已经支持而且可以些 -webkit-前缀，也可以不写。不禁感慨edge确实不是以前颇为让人诟病的ie了
CSS3 filter滤镜
WikY
12-30 1152
css3 filter 属性
CSS3滤镜系统（filter）
栈木地
01-25 259
拉走代码看效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;style&gt; *{ padding: 0; margin: 0; } body{ width
(初识)CSS3滤镜属性详解
qq_47132285的博客
10-30 174
在CSS3新增加的属性中有一个属性较为特殊，那就是filter属性，该属性一般来说是用于元素本身的装饰，使页面产生更多的显示特效。
CSS3十大滤镜效果详解
最新发布
AIMing_byte的博客
01-16 2101
类似于美颜相机、美图秀秀这样的美颜工具，能够让我们轻松地应用多种特效，例如转换为黑白照片、复古风格化、调整亮度等。在之前仅凭CSS几乎很难做到这些效果。但在CSS3的语法中，所有的这些视觉特效都是通过“”属性来快速实现的。
css3为图片添加滤镜(filter)
low666的博客
05-07 1802
css3为图片添加滤镜(filter) css3 filter语法解析 filter: none | blur() | brightness() | contrast() | drop-shadow() |grayscale() | hue-rotate() | invert() | opacity() | saturate() |sepia() | url(); 属性 解释 举例 ...
【CSS3】 filter(滤镜)属性
xyue_的博客
05-02 1883
CSS3 filter过滤、滤镜属性 总结
CSS3滤镜及Canvas.docx
11-26
“CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解” 本文主要探讨了在CSS3中如何使用滤镜效果，特别是在不同浏览器之间的兼容性和替代方案。CSS3滤镜是现代网页设计中增强视觉表现的重要工具，它允许开发者对网页元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值