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

最新推荐文章于 2024-04-29 16:11:31 发布

oahz4699092zhao

最新推荐文章于 2024-04-29 16:11:31 发布

阅读量2.5k

点赞数

文章标签：编码 js jquery html 网易

本文链接：https://blog.csdn.net/oahz4699092zhao/article/details/12776829

版权

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

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

oahz4699092zhao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
仿网易聚合新闻 - 超简单实现 - 刷新按钮CSS3旋转效果

最近无事，看到网易新闻的聚合版块，有个刷新按钮，于是也试着仿了下来，现分享代码：仿网易聚合新闻 - 刷新按钮旋转效果$(function(){ var deg = 0; $("a").click(function(){ deg = deg+360; $(this).css("transform","rotate("+deg+"deg)"); $(thi
复制链接

扫一扫