css动画+照片清晰度动画的实现方法

实例如下：

源代码：

1.   
2.   
3.   
4.   
5.   
6.   
7. .beijing{   
8. border: 1px solid black;   
9. width: 100%;   
10. height: 800px;   
11. background: black;   
12. }   
13. .a1 img{   
14. width: 100px;   
15. height: 100px;   
16. -webkit-filter: blur(2px);   
17. }   
18. .qq{   
19. position: absolute;   
20. left: 500px;   
21. top: 150px;   
22. }   
23. .qq img:hover{   
24. animation-name: one;   
25. animation-duration: 3s;   
26. animation-fill-mode: forwards;   
27. }   
28. @keyframes one{   
29. 0%{width: 200px;height: 200px;-webkit-filter:blur(4px);}   
30. 25%{width: 400px;height: 400px;-webkit-filter:blur(3px);}   
31. 80%{width: 600px;height: 600px;-webkit-filter:blur(2px);}   
32. 100%{width: 800px;height: 800px;-webkit-filter:blur(0px);}   
33. }   
34. .ww{   
35. position: absolute;   
36. left: 540px;   
37. top: 180px;   
38. }   
39. .ww img:hover{   
40. animation-name: one;   
41. animation-duration: 5s;   
42. animation-fill-mode: forwards;   
43. }   
44. .ss{   
45. position: absolute;   
46. left: 550px;   
47. top: 240px;   
48. }   
49. .ss img:hover{   
50. animation-name: one;   
51. animation-duration: 5s;   
52. animation-fill-mode: forwards;   
53. }   
54. .tt{   
55. position: absolute;   
56. left: 560px;   
57. top: 260px;   
58. }   
59. .tt img:hover{   
60. animation-name: one;   
61. animation-duration: 5s;   
62. animation-fill-mode: forwards;   
63. }   
64. .oo{   
65. position: absolute;   
66. left: 590px;   
67. top: 300px;   
68. }   
69. .oo img:hover{   
70. animation-name: one;   
71. animation-duration: 5s;   
72. animation-fill-mode: forwards;   
73. }   
74.   
75.   
76.   
77.   
78.