CSS3汶川地震濾鏡是一種特殊的CSS效果，它可以為網(wǎng)頁添加一種與眾不同的視覺效果。本文將介紹如何使用CSS3汶川地震濾鏡實(shí)現(xiàn)這種效果。

.earthquake {
filter: url('earthquake.svg#earthquake');
}
@-webkit-keyframes earthquake {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
25% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
50% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
75% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes earthquake {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
25% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
50% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
75% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}

以上是CSS代碼，其中.earthquake為添加濾鏡的元素的類名，earthquake.svg#earthquake為SVG文件的地址和內(nèi)容。在@keyframes中定義了從未發(fā)生地震狀態(tài)到發(fā)生地震到地震結(jié)束的過程。

實(shí)現(xiàn)方式為先將元素添加濾鏡，然后在發(fā)生地震的時候添加動畫效果，即可實(shí)現(xiàn)頁面顯得像發(fā)生了地震的效果。