Watch 1 Star 1 Fork 0

levy9527 / practiceJavaScript

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
前端基础练习 spread retract

Clone or download
filter.html 1.60 KB
Copy Edit Web IDE Raw Blame History
levy9527 authored 2016-09-27 09:47 . 修改注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3滤镜</title>
<style>
/* 默认是0~1, 即0~100% */
.gray {
filter: grayscale(1);
}
.sepia {
/* 看起来像老照片 old time */
filter: sepia();
}
.saturate {
/*0~100 */
filter: saturate(10);
}
.hue-rotate {
/* 0~360deg, 超出后重新计算 */
filter: hue-rotate(70deg);
}
.invert {
/* 看起来像相片底片, 50% 是分界线 */
filter: invert();
}
.opacity {
/* 和直接使用opacity是同样的效果, 因而没必要使用这个特效 */
filter: opacity(.1)
}
.brightness {
/* 0~1000, 大概到10差不多了*/
filter: brightness(5)
}
.contrast {
/* 大于1才有意思 */
filter: contrast(5);
}
.blur {
/* 0~100px, 注意好伤眼 */
filter: blur(5px)
}
.drop-shadow {
/* 增加立体感, 用法同box-shadow, 但效果有区别, box-shadow的阴影比较深/多 */
filter: drop-shadow(5px 5px 5px #ccc)
}
</style>
</head>
<body>
<img class="nomral" src="img.jpg" height="100px">
<img class="gray" src="img.jpg" height="100px">
<img class="sepia" src="img.jpg" height="100px">
<img class="saturate" src="img.jpg" height="100px">
<img class="hue-rotate" src="img.jpg" height="100px">
<img class="invert" src="img.jpg" height="100px">
<img class="opacity" src="img.jpg" height="100px">
<img class="brightness" src="img.jpg" height="100px">
<img class="contrast" src="img.jpg" height="100px">
<img class="blur" src="img.jpg" height="100px">
<img class="drop-shadow" src="img.jpg" height="100px">
</body>
</html>

Comment ( 0 )

You need to Sign in for post a comment

Help Search