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

发布时间：2020-12-13 19:41:08 所属栏目：百科来源：网络整理

导读：最近无事，看到网易新闻的聚合版块，有个刷新按钮，于是也试着仿了下来，现分享代码： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"htmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8"title仿网易聚合新闻 - 刷

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

<!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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!