CSS带返回顶部右侧悬浮菜单特效代码

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

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

以下是 CSS带返回顶部右侧悬浮菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS带返回顶部右侧悬浮菜单</title>

<link href="css/index.css" rel="stylesheet" type="text/css">

</head>
<body style="height:1200px;">
<div class="OnlineService_Bg">
	<div class="OnlineService_Box">
		<ul class="OnlineService_QQBox"><li><a target="_blank" rel="nofollow" href="http://www.baidu.com/">系统</a></li></ul>
		<div class="OnlineService_Phone"><a href="http://www.baidu.com/" target="_blank">在线咨询</a></div>
		<div class="OnlineService_Sign" target="_blank" onclick="http://www.baidu.com/">立即试用</div>
		<div class="OnlineService_Top"><a href="#">返回顶部</a></div>
	</div>
</div>
</body>
</html>

CSS代码(index.css):

*{margin:0;padding:0;font-family:"Microsoft YaHei";}
li{list-style:none}
img{border:none;}
/*在线客服*/
.OnlineService_Bg{width:100px;overflow:hidden;position:fixed;right:10px;bottom:20px;z-index:10;}
.OnlineService_Box{width:100%;overflow:hidden;}
.OnlineService_QQBox{width:88px;overflow:hidden;border:1px solid #cecece;margin-bottom:10px;background:#f5f5f5;}
.OnlineService_QQBox li{width:auto;height:35px;overflow:hidden;padding-left:34px;font-size:12px;line-height:35px;color:#666;background:url(icon_QQ1.png) no-repeat 5px center;cursor:pointer}
.OnlineService_QQBox li:hover{filter:alpha(opacity=50);/*IE滤镜，透明度50%*/
-moz-opacity:0.5;/*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/
}
.OnlineService_QQBox li a{text-decoration:none;color:#666;}
.OnlineService_Phone{width:90px;height:90px;margin-bottom:10px;}
.OnlineService_Phone a{display:block;width:90px;height:33px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;background-image:url(icon_Online.png);background-repeat:no-repeat;background-position:center 8px;cursor:pointer;text-decoration:none;color:#fff}
.OnlineService_Sign{width:90px;height:33px;margin-bottom:10px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;cursor:pointer;background-image:url(icon_Sign.png);background-repeat:no-repeat;background-position:center 10px;}
.OnlineService_Top{width:90px;height:90px;margin-bottom:10px;}
.OnlineService_Top a{display:block;width:90px;height:33px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;background-image:url(icon_Top.png);background-repeat:no-repeat;background-position:center 8px;cursor:pointer;text-decoration:none;color:#fff}

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