实例如下：
源代码：
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