css3

CSS3 Filter的特效

css语法

1
2
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

高斯模糊(blur)示例

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html lang="zh" class="no-js">
<head>
	<meta charset="UTF-8">
<style>
.example {
	    padding: .625rem 1.825rem .625rem 2.5rem;
	    border: 1px #ccc dashed;
	    position: relative;
	    margin: 0 0 .625rem 0;
	    background-color: #ffffff;
        position: absolute;   
        top: 50%;   
        left: 50%;   
        -webkit-transform: translate(-50%, -50%);   
        -moz-transform: translate(-50%, -50%);   
        -ms-transform: translate(-50%, -50%);   
        -o-transform: translate(-50%, -50%);   
        transform: translate(-50%, -50%); 
	}
.example::before {
    position: absolute;
    content: attr(data-text);
    text-transform: lowercase;
    left: 1.5rem;
    top: 11.875rem;
    color: gray;
    display: block;
    font-size: 1rem;
    line-height: 1rem;
    height: 1rem;
    text-align: right;
    white-space: nowrap;
    direction: ltr;
    width: 12.5rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
	-webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}
img:hover{filter:none}
</style>
</head>
<body>
<div class="example" data-text="example">
<p>图片使用高斯模糊效果:</p>
<img src="http://blog.wangchunjian.win/2016/marry.jpg" alt="marry" >
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</div>
</body>
</html>