手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了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>相关文章
- 手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。 代码打包下载： 手机站底部很好看的导航条效果 效果截图：
- 手机站底部导航条效果自适应手机屏幕大小
手机站底部导航条效果自适应手机屏幕大小 代码打包下载： 手机站底部导航条效果自适应手机屏幕大小 效果截图：
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
- 不错的CSS重置代码base.css
今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html
- 手机站头部超赞QQ邀请效果
手机站头部超赞QQ邀请效果，已整理为JS调用代码，方便直接引入网页调用。 打包下载： 手机站头部超赞QQ邀请效果 效果截图：
随机推荐
- 手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。 代码打包下载： 手机站底部很好看的导航条效果 效果截图：
- 手机站底部导航条效果自适应手机屏幕大小
手机站底部导航条效果自适应手机屏幕大小 代码打包下载： 手机站底部导航条效果自适应手机屏幕大小 效果截图：
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
- 不错的CSS重置代码base.css
今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html
- 手机站头部超赞QQ邀请效果
手机站头部超赞QQ邀请效果，已整理为JS调用代码，方便直接引入网页调用。 打包下载： 手机站头部超赞QQ邀请效果 效果截图：