手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了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>相关文章
- CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。 效果截图：
- CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。 方法就是在css当中增加上
- 常用CSS重置代码
CSS重置(CSS reset),也就是重置默认样式。在不同浏览器，HTML中标签的默认样式有一个默认属性值，渲染出来的效果不尽相同，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式，以方便统一，从而提高开发效率，提高样式代码的重用，
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
随机推荐
- CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。 效果截图：
- CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。 方法就是在css当中增加上
- 常用CSS重置代码
CSS重置(CSS reset),也就是重置默认样式。在不同浏览器，HTML中标签的默认样式有一个默认属性值，渲染出来的效果不尽相同，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式，以方便统一，从而提高开发效率，提高样式代码的重用，
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：