仿网易聚合新闻 - 超简单实现 - 刷新按钮CSS3旋转效果

来源：互联网发布：百度统计安装淘宝店铺编辑：程序博客网时间：2024/06/05 11:34

最近无事，看到网易新闻的聚合版块，有个刷新按钮，于是也试着仿了下来，现分享代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>仿网易聚合新闻 - 刷新按钮旋转效果</title><script src="js/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){var deg = 0;$("a").click(function(){deg = deg+360;$(this).css("transform","rotate("+deg+"deg)");$(this).css("-o-transform","rotate("+deg+"deg)");$(this).css("-webkit-transform","rotate("+deg+"deg)");});});</script><style>div {background: url("images/refresh.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);position:relative;opacity: 0.7;width:50px;height:50px;}a { background: url("images/refresh.png") no-repeat scroll -50px 0 rgba(0, 0, 0, 0);display:block; width:38px; height:36px; cursor: pointer;position:absolute;left:6px;top:8px; transition:transform 0.8s linear 0s; -o-transition:-o-transform 0.8s linear 0s;-webkit-transition:-webkit-transform 0.8s linear 0s;}</style></head><body><div><a target="_self" ></a></div>    </body></html>

这是refresh.png图片，jquery大家可以自行下载。

文件包下载：http://pan.baidu.com/share/link?shareid=3224596422&uk=2769120659