<img src="http://www.baidu.com/img/bdlogo.png" />
css部分:
img {
opacity: 0.6/*可以改变数值*/
transition: opacity 1s ease-in-out/*可以改变时间*/
-moz-transition: opacity 1s ease-in-out
-webkit-transition: opacity 1s ease-in-out
}
img:hover {
opacity: 1.0/*可以改变数值*/
transition: opacity .55s ease-in-out/*可以改变时间*/
-moz-transition: opacity .55s ease-in-out
-webkit-transition: opacity .55s ease-in-out
}
这是只有css3 可能一些浏览器不支持所以楼主要注意
我一般喜欢用jquery毕竟方便嘛
希望能帮到你
刚刚又看了一遍楼主的代码貌似你要的可能是css3 animation这样的？
这里是官网
http://www.w3schools.com/css/css3_animations.asp
这里是transitions的documentation
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
不需要CSS3+HTML5，用AJAX+DIV+CSS就可以了。利用AJAX取得未读数据的数量，把DIV的innerHTML设为该数量就行了，另外这是一个DIV(或则其他块元素)中嵌入的一个相对定位层。所以没必要去使用CSS3和HTML5,毕竟国内主要浏览器都不支持。现在支持CSS3和HTML5的浏览器就只有最新的浏览器(如IE9、opera、safari、FF等等)
在html5中实现响应式导航栏的方法有很多种，如何利用纯CSS来现实这一功能，在这里小编就通过实例来和大家讲解，纯CSS实现的HTML5响应式导航栏的方法和技巧。目前响应试web页面已经逐渐开始盛行，除了将页面的内容以及布局结构实现响应试以外，剩下的重点就是实现导航栏的响应试，当然方法有很多，不过最 近我发现了一个新的无需使用Javascript就能轻松实现响应试导航栏的技术，它采用的是简洁的html5标签结构来实现的应式导航栏，导航栏能够被 轻松的控制在左侧，中部，已经右侧。当鼠标经过导航栏时就会平滑拉菜单，不仅如此该响应式导航栏在手机屏幕和ie浏览器中也同样能够正常运行。
这样的你需要使用到css样式
你可以去了解下
Media Queries 响应媒体查询
你可以多去参考一些比较前沿的网站
比如 ipbun.cn 这样网站的响应式做的不错
