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

实例如下：

源代码：

1. !DOCTYPE html>   
2. html>   
3. head>   
4. tITle> donghua/title>   
5. meta charset="utf-8">   
6. style type="text/css">   
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. /style>   
75. /head>   
76. body>   
77. div class="beijing">   
78. div class="a1 qq"> img src="43a7d933c895d143b233160576f082025aaf074a.jpg"> /div>   
79. div class="a1 ww"> img src="03087bf40ad162d9ec74553b14DFa9ec8a13cd7a.jpg"> /div>   
80. div class="a1 ss"> img src="b151f8198618367ac7d2a1e92b738bd4b31ce5af.jpg"> /div>   
81. div class="a1 tt"> img src="023b5bb5c9ea15cec72cb6d6b2003af33b87b22b.jpg"> /div>   
82. div class="a1 oo"> img src="c2cec3fdfc03924578c6CFe18394a4c27c1e25e8.jpg"> /div>   
83. /div>   
84. /body>   
85. /html>   

以上这篇css动画+照片清晰度动画的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.COM/yzybc/Archive/2016/07/13/5668053.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！