css3鼠标滑动按钮动画滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3鼠标滑动按钮动画滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3鼠标滑动按钮动画效果</title>
</head>
<body>

	<link rel="stylesheet" type="text/css" href="css/btn1.css">
	
	<div id="wrap">
		<a href="#" class="btn-slide">
		  <span class="circle"><i class="fa fa-rocket"></i></span>
		  <span class="title">火箭</span>
		  <span class="title-hover">带你飞</span>
		</a>
		<a href="#" class="btn-slide2">
		  <span class="circle2"><i class="fa fa-download"></i></span>
		  <span class="title2">下载</span> 
		  <span class="title-hover2">点击下载</span>
		</a>
	</div>
	
	<link rel="stylesheet" type="text/css" href="css/btn2.css">
	
	<div class="container1">
		<div class="con_down1">
	    	<i class="fa fa-download fa-2x"></i>
	    	<h4>Download Now</h4>
	  	</div>
	  	<div class="con_sizes1">
	  		<div class="sizes1">
	    		<h5 class="size1">34.5 MB</h5>
	    		<div class="sizes_abs1"></div>
	  		</div>
	  	</div>
	</div>
	
	
	<div class="container2">
	    <div class="con_down2"> 
	    	<i class="fa fa-download fa-2x"></i>
	        <h4>Download now</h4>
	    </div>
	    <div class="con_sizes2">
	        <div class="sizes2">
	            <h5 class="size2">34.5 MB</h5>
	            <div class="sizes_abs2"></div>
	        </div>
	    </div>
	</div>
	
	<div><br /><br /></div>
	
	<link rel="stylesheet" type="text/css" href="css/btn3.css">
	
	<div class="center">
		<a class="spinningeffect" href="#" target="_blank"> 
			<img src="img/blogger-logo1.jpg" />
		</a> 
	</div>
	
	<div><br /></div>
	
	<link rel="stylesheet" type="text/css" href="css/focus.css">
	
	<div class="center">
		<a class="zoomeffect" href="#" target="_blank">
		<img src="img/addfocus.jpg" /></a>
	</div>

	<div><br /></div>
	
	<link rel="stylesheet" type="text/css" href="css/btn4.css">
	
	<div class="mudwnpbutton center">
		<a href="#" target="blank" rel="nofollow">预览</a>
	</div>
	
	
	<link rel="stylesheet" type="text/css" href="css/btn5.css">

	<div class="whitebuttondemo">
		<a href="#">button</a>
		<span class="up">message</span>
	</div>
	
	<div><br /><br /></div>

	<div class="whitebutton">
		<a href="#">button</a>
		<span class="up">top message</span>
		<span class="down"> 1.6MB .rar </span>
	</div>

	<div></div>
</body>
</html>

CSS代码(btn1.css):

#wrap{margin:20px auto;text-align:center;}
#wrap br{display:none;}
.btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s;}
.btn-slide2{border:2px solid #efa666;}
.btn-slide:hover{background-color:#0099cc;}
.btn-slide2:hover{background-color:#efa666;}
.btn-slide:hover span.circle,.btn-slide2:hover span.circle2{right:100%;margin-right:-45px;background-color:#fdfdfd;color:#0099cc;}
.btn-slide2:hover span.circle2{color:#efa666;}
.btn-slide:hover span.title,.btn-slide2:hover span.title2{right:40px;opacity:0;}
.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;right:40px;}
.btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:right;margin:5px;line-height:42px;height:40px;width:40px;top:0;right:0;transition:.5s;border-radius:50%;}
.btn-slide2 span.circle2{background-color:#efa666;}
.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2 span.title-hover2{position:absolute;right:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s;}
.btn-slide2 span.title2,.btn-slide2 span.title-hover2{color:#efa666;right:80px;}
.btn-slide span.title-hover,.btn-slide2 span.title-hover2{right:80px;opacity:0;}
.btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff;}

CSS代码(focus.css):

.zoomeffect img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0;}
.zoomeffect img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity:1;}

附件:下载该文件资源,减少时间成本(增值服务)