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

前端之家收集整理的这篇文章主要介绍了仿网易聚合新闻 - 超简单实现 - 刷新按钮CSS3旋转效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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


<!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);
		position:relative;		
		opacity: 0.7;
		width:50px;
		height:50px;		
	}
	a { 
		background: url("images/refresh.png") no-repeat scroll -50px 0 rgba(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

猜你在找的设计模式相关文章