css3的过滤效果
上面的图片就是css3新特性的滤镜效果,学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~
好,咱们先把照片后面的白框实现,
<style>
#div1{
/*给div定义宽高和颜色*/
width: 200px;
height: 250px;
background: white;
/* 内填充距离照片为15px ,文字居中*/
padding: 15px;
text-align: center;
/* 把白色背景旋转-10deg */
-webkit-transform: rotate(-10deg);
/*给背景一个阴影的效果*/
box-shadow: 4px 4px 4px #666;
float: left;
}
</style>
<body>
<div id="div1">
<img src="img/001V28Mwty6Fww02IiNad&690.jpg">
<p>灰色滤镜</p>
</div>
</body>
把白色的背景框写好之后,接下来就该到滤镜了
首先来第一张,艺术的黑白色
#div1 img{ /*把div1里面的图片百分百,等同于相对于在div1里面百分比放大填充*/
width: %;
/*把图片变成黑白色括号里跟颜色变化的值,只能取0~1之间*/
-webkit-filter: grayscale(); }
第二张照片,额...老照片.
#div1 img{
width: %;
-webkit-filter: sepia();
}
第三张照片,反色?我也不太清楚啥颜色
#div1 img{
width: %;
-webkit-filter: hue-rotate(200deg);
}
第四张照片,仿佛罩了一层白雾
#div1 img{
width: %;
-webkit-filter: opacity(0.5);
}
还有一张照片的效果图上没有,是模糊效果代码如下
#div4 img{
width: %;
-webkit-filter: opacity(0.5);
}
好了,我的滤镜分享完毕,接下来美图去了
css3的过滤效果的更多相关文章
- css3图片过滤效果
在线演示 本地下载
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
随机推荐
- Java 并行 (2): Monitor
转自:http://www.cnblogs.com/tomsheep/archive/2010/06/09/1754419.html 1. 什么是Monitor? Monitor其实是一种同步工具,也 ...
- ES6中的Symbol
---恢复内容开始--- Symbol 1.1 概述 保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突.这就是 ES6 引入Symbol的原因 在es6之前,JavaScript ...
- Co-prime
Co-prime Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem ...
- netty自定义协议 心跳 断线重连源码
https://github.com/aa1356889/NettyHeartbeat
- 洛谷——P2038 无线网络发射器选址
https://www.luogu.org/problem/show?pid=2038 题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城 ...
- Storm工作流程 vs. Spark Stream
看的这个学习课程: http://study.163.com/course/courseLearn.htm?courseId=1002887002#/learn/video?lessonId=1003 ...
- [Angular] Freshness Caching Policy - Network First, Cache Last
In some cases, you want to get fresh data instead of cache data to the screen, such as stock applica ...
- hdu 4586 Play the Dice (概率+等比数列)
Play the Dice Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) To ...
- 相似 nginx 编译时生成函数链表
下面代码可能须要一定的c/c++基础. 须要有一些函数指针的知识 深度剖析函数指针点击这里 common.h #pragma once typedef int (*pt)(void); void in ...
- 支付宝钱包手势password破解实战(root过的手机可直接绕过手势password)
/* 本文章由 莫灰灰 编写,转载请注明出处. 作者:莫灰灰 邮箱: minzhenfei@163.com */ 背景 随着移动互联网的普及以及手机屏幕越做越大等特点,在移动设备上购物.消费已是 ...