手机站底部很好看的导航条效果
模板网 2014-10-04
手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。
代码打包下载：手机站底部很好看的导航条效果
效果截图：
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
<title>手机站底部很好看的导航条效果</title>
<style type="text/css">
* {margin:0;padding:0;}
a { text-decoration: none; }
a:hover { text-decoration: none; }
#bottomnav{
position:fixed;
left:0px !important;
bottom:0px !important;
width:100%;
height:40px;
z-index:1000;
font-size:18px;
text-align:center;
font-weight:bold;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#c10032), to(#920026));
background:-moz-linear-gradient(top,#c10032,#920026);
overflow:hidden;
}
#bottomnav a{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#c10032), to(#920026));
background:-moz-linear-gradient(top,#c10032,#920026);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c10032,endColorstr=#920026,grandientType=0);
color:#ffffff;
display:inline-block;
float:left;
width:40%;
height:100%;
line-height:40px;
font-size:14px;
}
#bottomnav a.free_tel{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#ff6900), to(#ff6900));
background:-moz-linear-gradient(top,#ff6900,#ff6900);}
#bottomnav a.free_tel img{-webkit-animation: change 1s infinite;animation: change 1s infinite;-moz-animation:change 1s infinite;}
#bottomnav a.botdet{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff));
background:-moz-linear-gradient(top,#fff,#fff);
width:20%;
color:#5f5f60;
font-size:14px;
position:relative;
}
#bottomnav a.botdet em{width:45px;text-align:center;position:absolute;left:41%;top:30px;color:#5f5f60;}
@keyframes change
{
0% {transform: scale(.8);}
50% {transform: scale(1);}
100% {transform: scale(.8);}
}
@-webkit-keyframes change
{
0% {-webkit-transform: scale(.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(.8);}
}
@-moz-keyframes change
{
0% {-moz-transform: scale(.8);}
50% {-moz-transform: scale(1);}
100% {-moz-transform: scale(.8);}
}
</style>
<body>
<div id="bottomnav">
<a onclick="openZoosUrl();return false;" href="javascript:void(0)" target="_self" data-role="none" rel="external" class="yournews"><img src="/demo/20141004/001/images/bottom_03.png" style="width:30px; vertical-align:middle;margin-bottom:3px;" /> 悄悄提问</a>
<a href="/" target="_self" class="botdet"><img src="/demo/20141004/001/images/bottom_055.png" style="width:28px;height:40px; vertical-align:middle;margin-bottom:3px;" /></a>
<a href="tel:10086" class="free_tel"><img style="width:25px; vertical-align:middle;margin-bottom:3px;" src="/demo/20141004/001/images/btn22_tel.png">电话咨询</a>
<div style="clear:both;"></div>
</div>
</body>
</html>相关文章
- JS+CSS简单实现DIV遮罩层显示隐藏
Copy上面的代码到HTML页面即可查看效果。 原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index，显示在最
- 手机站常用的底部导航条，宽度自适应
手机站常用的底部导航条，宽度自适应。 代码打包下载： 手机站常用的底部导航条，宽度自适应 效果截图：
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
- 手机站底部导航条效果自适应手机屏幕大小
手机站底部导航条效果自适应手机屏幕大小 代码打包下载： 手机站底部导航条效果自适应手机屏幕大小 效果截图：
- 手机站头部超赞QQ邀请效果
手机站头部超赞QQ邀请效果，已整理为JS调用代码，方便直接引入网页调用。 打包下载： 手机站头部超赞QQ邀请效果 效果截图：
随机推荐
- JS+CSS简单实现DIV遮罩层显示隐藏
Copy上面的代码到HTML页面即可查看效果。 原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index，显示在最
- 手机站常用的底部导航条，宽度自适应
手机站常用的底部导航条，宽度自适应。 代码打包下载： 手机站常用的底部导航条，宽度自适应 效果截图：
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
- 手机站底部导航条效果自适应手机屏幕大小
手机站底部导航条效果自适应手机屏幕大小 代码打包下载： 手机站底部导航条效果自适应手机屏幕大小 效果截图：
- 手机站头部超赞QQ邀请效果
手机站头部超赞QQ邀请效果，已整理为JS调用代码，方便直接引入网页调用。 打包下载： 手机站头部超赞QQ邀请效果 效果截图：