实例如下：
源代码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml><html><head><title>donghua</title><metacharset="utf-8"><styletype="text/css">.beijing{border:1pxsolidblack;width:100%;height:800px;background:black;}.a1img{width:100px;height:100px;-webkit-filter:blur(2px);}.qq{position:absolute;left:500px;top:150px;}.qqimg:hover{animation-name:one;animation-duration:3s;animation-fill-mode:forwards;}@keyframesone{0%{width:200px;height:200px;-webkit-filter:blur(4px);}25%{width:400px;height:400px;-webkit-filter:blur(3px);}80%{width:600px;height:600px;-webkit-filter:blur(2px);}100%{width:800px;height:800px;-webkit-filter:blur(0px);}}.ww{position:absolute;left:540px;top:180px;}.wwimg:hover{animation-name:one;animation-duration:5s;animation-fill-mode:forwards;}.ss{position:absolute;left:550px;top:240px;}.ssimg:hover{animation-name:one;animation-duration:5s;animation-fill-mode:forwards;}.tt{position:absolute;left:560px;top:260px;}.ttimg:hover{animation-name:one;animation-duration:5s;animation-fill-mode:forwards;}.oo{position:absolute;left:590px;top:300px;}.ooimg:hover{animation-name:one;animation-duration:5s;animation-fill-mode:forwards;}</style></head><body><divclass="beijing"><divclass="a1qq"><imgsrc="43a7d933c895d143b233160576f082025aaf074a.jpg"></div><divclass="a1ww"><imgsrc="03087bf40ad162d9ec74553b14dfa9ec8a13cd7a.jpg"></div><divclass="a1ss"><imgsrc="b151f8198618367ac7d2a1e92b738bd4b31ce5af.jpg"></div><divclass="a1tt"><imgsrc="023b5bb5c9ea15cec72cb6d6b2003af33b87b22b.jpg"></div><divclass="a1oo"><imgsrc="c2cec3fdfc03924578c6cfe18394a4c27c1e25e8.jpg"></div></div></body></html>以上这篇css动画+照片清晰度动画的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://www.cnblogs.com/yzybc/archive/2016/07/13/5668053.html
