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

互联网
叶子的想法，你不用明白，而叶生两面，你必须明白。所以，有人在秋天看到的是生命的衰败和无奈，有人在秋天看到的是生命的辉煌和温怡。到门不敢提凡鸟，看竹何须问主人。

实例如下：

源代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>donghua</title>
  5. <metacharset="utf-8">
  6. <styletype="text/css">
  7. .beijing{
  8. border:1pxsolidblack;
  9. width:100%;
  10. height:800px;
  11. background:black;
  12. }
  13. .a1img{
  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. .qqimg:hover{
  24. animation-name:one;
  25. animation-duration:3s;
  26. animation-fill-mode:forwards;
  27. }
  28. @keyframesone{
  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. .wwimg: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. .ssimg: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. .ttimg: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. .ooimg:hover{
  70. animation-name:one;
  71. animation-duration:5s;
  72. animation-fill-mode:forwards;
  73. }
  74. </style>
  75. </head>
  76. <body>
  77. <divclass="beijing">
  78. <divclass="a1qq"><imgsrc="43a7d933c895d143b233160576f082025aaf074a.jpg"></div>
  79. <divclass="a1ww"><imgsrc="03087bf40ad162d9ec74553b14dfa9ec8a13cd7a.jpg"></div>
  80. <divclass="a1ss"><imgsrc="b151f8198618367ac7d2a1e92b738bd4b31ce5af.jpg"></div>
  81. <divclass="a1tt"><imgsrc="023b5bb5c9ea15cec72cb6d6b2003af33b87b22b.jpg"></div>
  82. <divclass="a1oo"><imgsrc="c2cec3fdfc03924578c6cfe18394a4c27c1e25e8.jpg"></div>
  83. </div>
  84. </body>
  85. </html>

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

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例