CSS3 滤镜
2024-10-13 18:05:52
了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生，CSS3对各种滤镜效果有了支持，可以做出很多好玩儿效果，走马观花了解一下
语法
filter: function(param);
很很多CSS3属性一样，监狱支持情况需要使用浏览器前缀，CSS滤镜支持的方法有
- grayscale 灰度
- sepia 褐色
- saturate 饱和度
- hue-rotate 色相旋转
- invert 反色
- opacity 透明度
- brightness 亮度
- contrast 对比度
- blur 模糊
- drop-shadow 阴影
效果
拿图片做例子，看看效果
原图
-webkit-filter:none;
以下效果都不是截图，Chrome上看
模糊
-webkit-filter:blur(10px);
灰度
-webkit-filter:grayscale(0.5);
褐色
-webkit-filter:sepia(0.5);
亮度
-webkit-filter:brightness(3);
色相
-webkit-filter:hue-rotate(180deg);
反色
-webkit-filter:invert(1);
透明
-webkit-filter:opacity(0.5);
饱和度
-webkit-filter:saturate(5);
对比度
-webkit-filter:contrast(0.5);
阴影
-webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.9));
浏览器支持
不多说了，caniuse
完了。。。
虽然不错，但好不尽兴的样子
好玩儿的动画
最简单的
CSS动画对滤镜效果也是支持的
.animate1 {
-webkit-animation: filter-animation 5s infinite;
}
@-webkit-keyframes filter-animation {
0% {
-webkit-filter: sepia(0) saturate(2) drop-shadow(0px 0px 0px rgba(0,0,0,0));
}
50% {
-webkit-filter: sepia(1) saturate(8) drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
100% {
-webkit-filter: sepia(0) saturate(2) drop-shadow(10px 10px 15px rgba(0,0,0,0.9));
}
}
<style>
.animate1 {
-webkit-animation: filter-animation 5s infinite;
}
@-webkit-keyframes filter-animation {
0% {
-webkit-filter: sepia(0) saturate(2) drop-shadow(0px 0px 0px rgba(0,0,0,0));
}
50% {
-webkit-filter: sepia(1) saturate(8) drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
100% {
-webkit-filter: sepia(0) saturate(2) drop-shadow(10px 10px 15px rgba(0,0,0,0.9));
}
}
</style>
<img class="animate1" src="http://lsly1989.qiniudn.com/scsacasgbgjtuyhead副本.png">
blur和contrast结合
阴影和对比度同时作用时会有出人意料的效果
动动更健康
最新文章
- .NET 实现并行的几种方式（四）
- mac 下卸载mysql的方法
- 【转载】CSS 盒子模型
- css3学习总结8--CSS3 3D转换
- fastboot 刷system.img 提示 sending 'system' (*KB)... FAILED (remote: data too large)
- 包装设计模式的实现以改进BufferedReader中的readLine方法为例
- Make AngularJS $http service behave like jQuery.ajax()(转)
- 写在新建博客的第一天 分类： fool_tree的笔记本 2014-11-08 17:57 144人阅读 评论(0) 收藏
- Java之面向对象相关问题集
- SELinux与进程管理
- [BZOJ]1085 骑士精神(SCOI2005)
- SVN/GIT精简使用教程
- 9.Django form组件
- Xilinx Zynq ZC-702 开发（02）—— 软件程序调试方法
- BZOJ3105 新Nim游戏 【拟阵】
- 560. Subarray Sum Equals K 求和为k的子数组个数
- JavaWeb学习 (十二)————使用Session防止表单重复提交
- 06-jQuery的文档操作(重点)
- Go语言实践_实现一（服务器端）对多（客户端）在线聊天室
- 第11章：MongoDB-CRUD操作--文档--查询