css2仿微信导航栏-滑动门

主要的实现方式是

说明图片为雪碧图

1、将一张背景1图片给a标签2、将背景2设置给span标签并不设置宽度

3同样的方式给：hover再设置不同的背景12

a标签代码片段li

a {
height: 33px;
/* line-height:75px; */
color: orange;
text-decoration: none;
background: url('bg.png') no-repeat 0px -192px;
padding-left: 10px;
display: inline-block;

span标签代码片段：

span {
height: 33px;
line-height: 33px;
text-decoration: none;
background: url('bg.png') repeat right -192px;
padding-right: 10px;
display: inline-block;

}

a:hover span {
height: 31px;
color: yellowgreen;
background: url('bg.png') repeat right -144px;
}

css2仿微信导航栏-滑动门相关推荐

CSS——CSS滑动门及其应用（制作微信导航栏） ※
滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一 ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...
Androidstudio的制作微信导航栏的微信素材库
Androidstudio的制作微信导航栏的微信素材库(全部都是矢量绘图),大家可以去下载本次是一个资源分享,当你第一次看相关的导航栏的制作时可能会去模仿制作一个微信导航栏,用现成的矢量 ...
仿小米导航栏html+css
仿小米导航栏 <!DOCTYPE html> <html> <head><meta charset="utf-8"><titl ...
微信小程序导航栏滑动一定距离后固定到顶部
接上一篇文章的内容,通常在一个页面中部会有一个导航栏查看不同的内容,这篇文章旨在实现在页面下滑的过程中导航栏自动固定到顶部以便我们阅读过程中的切换. 下滑一段距离后自动固定到顶部首先,思考这个功能应 ...
闲着无聊，撸个微信导航栏的动画吧！
/ 开始 / 微信自发布以来,底部导航栏的动画一直让开发者津津乐道,而且伴随着版本更新,底部导航栏的动画也一直在改进.我最近在闲暇之余,看了下微信的底部导航栏动画,于是思考了下这个动画的原理, ...
粘性控件，滑动停留StickLayout（导航栏滑动停留）
我们平时在使用APP的时候,经常可以见到一些导航栏滑到顶端就停留,而下面的控件可以接着滑动:今天,我就给大家介绍一个非常好用的滑动粘性控件StickLayout,它不仅可以让其任意一个直接子控件滑动停 ...
php 京东首页分类导航,仿京东导航栏
摘要: 仿京东顶部导航栏仿京东顶部导航栏 *{ margin:0px; padding:0px; } .header{ width:100%; height:35px; background-co ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...

css2仿微信导航栏-滑动门

css2仿微信导航栏-滑动门相关推荐

最新文章

热门文章