源代码：

<!DOCTYPE html>
<html>
<head>
<title>donghua</title>
<meta charset="utf-8">
<style type="text/css">
.beijing{
border: 1px solid black;
width: 100%;
height: 800px;
background: black;
}
.a1 img{
width: 100px;
height: 100px;
-webkit-filter: blur(2px);
}
.qq{
position: absolute;
left: 500px;
top: 150px;
}
.qq img:hover{
animation-name: one;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes one{
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;
}
.ww img:hover{
animation-name: one;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.ss{
position: absolute;
left: 550px;
top: 240px;
}
.ss img:hover{
animation-name: one;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.tt{
position: absolute;
left: 560px;
top: 260px;
}
.tt img:hover{
animation-name: one;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.oo{
position: absolute;
left: 590px;
top: 300px;
}
.oo img:hover{
animation-name: one;
animation-duration: 5s;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div class="beijing">
<div class="a1 qq"><img src="43a7d933c895d143b233160576f082025aaf074a.jpg"></div>
<div class="a1 ww"><img src="03087bf40ad162d9ec74553b14dfa9ec8a13cd7a.jpg"></div>
<div class="a1 ss"><img src="b151f8198618367ac7d2a1e92b738bd4b31ce5af.jpg"></div>
<div class="a1 tt"><img src="023b5bb5c9ea15cec72cb6d6b2003af33b87b22b.jpg"></div>
<div class="a1 oo"><img src="c2cec3fdfc03924578c6cfe18394a4c27c1e25e8.jpg"></div>
</div>
</body>
</html>

css动画+照片清晰度动画的更多相关文章

  1. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  3. 【CSS】过渡、动画和变换

    1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...

  4. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  5. CSS 实现加载动画之六-大风车

    这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...

  6. CSS 实现加载动画之五-光盘旋转

    今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

  7. 纯css实现苹果表盘动画

    欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...

  8. 前端案例分享（一）：CSS+JS实现流星雨动画

    目录 引言 1.效果图 2.源码 3.案例解析 4.小问题 5.结语 引言        平常会做一些有意思的小案例练手,通常都会发到codepen上,但是codepen不能写分析.        所 ...

  9. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

随机推荐

  1. 疯狂学习java web3(javaScript)

    js之前有看过,只不过是在C++代码中通过UI引擎调用js进行画图,当时就为语法问题痛苦了半天,结果现在java web了,更是处处是js,再次陷入痛苦中. js实际例子: <!DOCTYPE ...

  2. hibernate的get、load的方法的区别，IllegalArgument异常

    关于hibernate中的load,get,以及延迟加载问题 今天在使用hibernate时,发现一异常: could not initialize proxy - no Session 查询资料之后 ...

  3. ibatis ORA-00911: 无效字符

    检查下xml文件中 sql的最后是不是写了 “;” 最容易犯这个毛病,都不知道吃了多少次亏了. 什么ORA-00911: 无效字符 什么The error occurred while applyin ...

  4. MYSQL一对多，两表查询合并数据

    select a.askid,a.title,GROUP_CONCAT(b.message SEPARATOR '----') as content from gg_ask as a join gg_ ...

  5. 在C#中使用属性控件添加属性窗口

    转自原文 在C#中使用属性控件添加属性窗口 第一步,创建在应用程序中将要展现的字段属性为public公有属性.其中,所有的属性必须有get和set的方法(如果不设置get方法,则要显示的属性不会显示在 ...

  6. 判断input checkbox选中状态

    $("#IsAdmin").is(':checked') 判断收否选中 返回true 或者false

  7. iOS开发之WKWebView简单使用

    iOS开发之WKWebView简单使用   iOS开发之 WKWebVeiw使用 想用UIWebVeiw做的,但是突然想起来在iOS8中出了一个新的WKWebView,算是UIWebVeiw的升级版. ...

  8. iOS Block 用法 (1)-once again

    Block简介: Block的实际行为和Function很像,最大的差别是在可以存取同一个Scope的变量值.Block实体形式如下: ^(传入参数列){行为主体}; Block实体开头是“^”,接着 ...

  9. Solr4.8.0源码分析(8)之Lucene的索引文件(1)

    Solr4.8.0源码分析(8)之Lucene的索引文件(1) 题记:最近有幸看到觉先大神的Lucene的博客,感觉自己之前学习的以及工作的太为肤浅,所以决定先跟随觉先大神的博客学习下Lucene的原 ...

  10. stdout 与 stderr 的区别

    stdout 与 stderr 的区别 一直没有注意 stdout 与 stderr 的区别,以为只是不同的描述方式.看来不是这样的. stdout 主要处理的是使用者输出 stderr 主要处理的错 ...