html炫酷的导航栏效果,css3制作炫酷导航栏效果
今天主要利用hover选择器。鼠标滑过查看效果。
一。普通导航栏
Home
Content
Service
Team
Contact
对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单。
(1)使用ul标签布局
(2)鼠标经过事件
- Homeli>
- Contentli>
- Serviceli>
- Teamli>
- Contactli>
ul>
div>
*{padding:0;margin:0;list-style:none;text-decoration:none;
}a{color:#fff;
}#demo1{width:600px;
}#demo1 ul li{float:left;width:100px;height:50px;text-align:center;background:#ccc;line-height:50px;color:#FFF;
}#demo1 ul li:hover{background:#999;
}
(二)括号类导航栏
Home
Content
Service
Team
Contact
对于导航栏的排版这里就不多说了,可以看到当鼠标经过的时候会从文字中出现括号,思路:
(1)当无鼠标经过事件时,括号其实是有的,只不多它处于隐形状态在文字中间
(2)当鼠标经过时,括号从中间移动到两边,并且从隐形变为显示。
- Homea>li>
- Contenta>li>
- Servicea>li>
- Teama>li>
- Contacta>li>
ul>
div>
#demo2{width:600px;height:50px;margin:20px auto;
}#demo2 ul li{position:relative;float:left;width:100px;height:50px;text-align:center;line-height:50px;background:#000;
}#demo2 ul li a:before{content:"[";margin-right:10px;transform:translateX(20px);-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);
}#demo2 ul li a:after{content:"]";margin-left:10px;transform:translateX(-20px);-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);
}#demo2 ul li a:before,#demo2 ul li a:after{display:inline-block;opacity:0;transition:transform 0.3s, opacity 0.2s;-moz-transition:transform 0.3s, opacity 0.2s;-webkit-transition:transform 0.3s, opacity 0.2s;-ms-transition:transform 0.3s, opacity 0.2s;
}#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after{opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px);
}
三。滑动导航栏
Home
Content
Service
Team
Contact
从演示效果来看要注意两点
(1)鼠标经过时有横向从上到下
(2)鼠标经过时文字从上到下并且变换颜色
这就和上一个例子很像了
(1)横线其实是存在的,只不过鼠标没有经过时是在文字上方且透明的,鼠标经过时横线由上到下。
(2)文字这里就要定义一个动画了,因为在鼠标经过时它体现了三种状态:
①文字从现位置划下
②文字从出现在上方
③文字从上方滑到现位置
- Homespan>a>li>
- Contentspan>a>li>
- Servicespan>a>li>
- Teamspan>a>li>
- Contactspan>a>li>
ul>
div>
#demo3 ul li{float:left;margin:0 25px;position:relative;
}#demo3 ul li a{color:#D8761E;font-family:'Righteous', cursive;display:block;padding:10px 0;
}#demo3 ul li span{display:block;
}#demo3 ul li a:before{content:"";position:absolute;width:100%;height:3px;background:#D8761E;bottom:0;opacity:0;-webkit-transform:translate3d(0, -40px, 0);transform:translate3d(0, -40px, 0);-webkit-transition:-webkit-transform 0s 0.3s, opacity 0.2s;transition:transform 0s 0.3s, opacity 0.2s;
}#demo3 ul li a:hover::before{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:-webkit-transform 0.5s, opacity 0.1s;transition:transform 0.5s, opacity 0.1s;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
}#demo3 ul li a:hover span{color:#510301;-webkit-animation:anim-francisco 0.3s forwards;animation:anim-francisco 0.3s forwards;
}@-webkit-keyframes anim-francisco{50% {
opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);
}51%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);
}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);
}}
@keyframes anim-francisco{50% {
opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);
}51%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);
}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);
}}
这里注意的是不能给标签设置宽高,因为一旦设置宽高会影响文字滑动路线,变得很夸张。这里加span也是这个原因,鼠标经过a时让span以a为参照进行滑动。
里面的标签就不解释了,自己查效果会更好哦。
我好无奈呀,用这个显示效果a标签和li的默认样式竟然不能取消,谁能告诉我为什么/(ㄒoㄒ)/~~ 不过自己编译的话在浏览器里是正常的
html炫酷的导航栏效果,css3制作炫酷导航栏效果相关推荐
- 纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册 整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
- html设置发光字体制作,CSS3制作炫酷的自定义发光文字
CSS3制作炫酷的自定义发光文字 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px ...
- 纯CSS3 制作交通信号灯红绿灯动画效果
纯CSS3 制作交通信号灯红绿灯动画效果 HTML: <div class="light"><div class="red"></ ...
- css3制作炫酷导航栏效果 转
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果
[一.项目背景] 在浏览一些网站的时候,经常会看到很多的炫酷的效果去装饰页面,使它看起来更高端大气一些.比如,艺龙就采用了图片上加载文字,点击图片使把对应的图片放大,使用户清晰,直观的看到内容.这种效 ...
- js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...
- html音乐跳动的线,利用CSS3制作跳动音乐频谱跳动效果
[摘要] CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果. 在一个网站上看到"直播中"的提示标题, ...
- html实现凹陷效果,css3怎么实现字体凹陷凸出效果?(附代码)
本篇文章主要给大家介绍用css3实现字体凹陷或凸出效果的实现方法. 我们在设计网页时,常常会需要考虑到用户体验,那么足够美观的网页才能吸引住用户.为了让网页内容更加丰富好看,我们可能会使用ps做出很多 ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果--卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
最新文章
- python文件的基础操作
- (四)Java B2B2C o2o多用户商城 springcloud架构-断路器(Hystrix)
- Python 爬取可用代理 IP
- 二次创业成功人士的19个经验与教训
- z390 黑苹果启动盘_不到800元买块1TB固态,折腾一下黑苹果的安装
- 浅析软件工程中的UML建模技术
- Hbase shell 常用命令
- acwing提高组 第一章 动态规划
- ENVI计算公式(一)
- 好的可视化报告一目了然,丑的可视化报表一文不值
- MyEclipse 7.0 用java代码生成序列号
- java五子棋棋盘_java五子棋项目(一)
- 山东CIO智库会员参观徐工信息公司
- mysql8搭建innodb_cluster集群
- kotlin的属性代理
- 神经网络如何提高准确率,神经网络的求解方式
- 元转万元单位换算_excel数值单位转换-----元与万元、千元、百元的转换
- 如何提高深度睡眠质量,科学解决睡眠问题
- 软件下载地址链接收藏
- 3D游戏建模学习路线