在实际开发中,我们还可以将滤镜效果和动画效果结合起来,如果运用得好,甚至会为页面添色不少。下面我们来尝试做一个“鬼屋”的动画效果,小伙伴们可以看看具体是怎么实现的。

实在代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body {text-align: center;} /*调用动画*/ img {animation: haunted 5s infinite;} /*定义动画*/ @keyframes haunted { 0% { -webkit-filter: brightness(20%); filter: brightness(20%); } 40% { -webkit-filter: brightness(20%); filter: brightness(20%); } 50% { -webkit-filter: sepia(1) contrast(2) brightness(200%); filter: sepia(1) contrast(2) brightness(200%); } 60% { -webkit-filter: sepia(1) contrast(2) brightness(200%); filter: sepia(1) contrast(2) brightness(200%); } 62% { -webkit-filter: brightness(20%); filter: brightness(20%); } 96% { -webkit-filter: brightness(20%); filter: brightness(20%); } 96% { -webkit-filter: brightness(400%); filter: brightness(400%); } } </style> </head> <body> <img src="img/house.png" alt=""> </body> </html>

浏览器预览效果如下图所示。