纯CSS3实现带动画效果导航菜单无需js


Posted in HTML / CSS onSeptember 27, 2013

随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3。网页能表达的东西越来越多,css3兴起已经很多年了,不多由于国内网站要求对IE的兼容,html5+css3的发展很缓慢。

html5+css3的出现给前端开发者提供了更多的可能性,以前很多只能通过JS实现的效果用纯粹的css3就能实现了。

下面介绍一个博主在css3学习过程中写的一个纯css3实现的带动画效果的导航菜单。

下面是效果图:
纯CSS3实现带动画效果导航菜单无需js 
查看示例(请在支持css3的浏览器中查看效果,最新版的chrome浏览器下效果最佳。)

纯css动画导航菜单下载 

话不多说,直接贴源码:

css:

复制代码
代码如下:

*{
margin:0;
padding:0;
}
html{
background: #333d43;
}
footer a{
color:#fff;
text-decoration:none;
}
footer a:hover{
text-decoration:underline;
}
body{
min-height:500px;
font:14px/1.3 'Microsoft YaHei';
color:#888;
padding:10px;
}
nav{
position:relative;
border-radius:5px;
display:block;
margin: 30px auto 0;
width:800px;
background:#fff;
border-radius:5px;
box-shadow: 1px 1px 33px #fff;
}
.homeIcon{
position:relative;
display:block;
width:50px;
height:40px;
}
#home:hover > a .home-top{
border-bottom:10px #fff solid;
}
#home:hover > a .home-top-r{
background:#fff;
}
#home:hover > a .home-door-l{
background:#fff;
}
#home:hover > a .home-door-r{
background:#fff;
}
.home-top{
position:absolute;
left:15px;
top:0px;
border-left:10px transparent solid;
border-right:10px transparent solid;
border-top:10px transparent solid;
border-bottom:10px #C2C2C2 solid;
box-shadow: 0px 1px 0px #000;
width:0px;
height:0px;
}
.home-top-r{
position:absolute;
left:27px;
top:13px;
width:4px;
height:6px;
background:#C2C2C2;
}
.home-door-l{
position:absolute;
left:18px;
top:20px;
width:5px;
height:6px;
background:#C2C2C2;
}
.home-door-r{
position:absolute;
left:27px;
top:20px;
width:5px;
height:6px;
background:#C2C2C2;
}
.fancyNav{
display:block;
position:relative;
border-radius:5px;
background-image: linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
background-image: -webkit-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
background-image: -moz-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
background-image: -o-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
background-image: -ms-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%); }
.fancyNav li{
position:relative;
height:40px;
line-height:40px;
padding:0px 20px;
display:block;
float:left;
border-right:1px #000 solid;
}
.fancyNav li:hover{
background:rgba(10, 5, 5, 0.2);
}
.fancyNav li ul{
position:absolute;
display:none;
left:0px;
overflow:hidden;
}
.fancyNav li:hover>ul{
display:block;
animation:animated .5s ease 0s 1 alternate;
-webkit-animation:animated .5s ease 0s 1 alternate;
-moz-animation:animated .5s ease 0s 1 alternate;
-ms-animation:animated .5s ease 0s 1 alternate;
-o-animation:animated .5s ease 0s 1 alternate;}
@keyframes animated
{
0% {transform: rotate(0deg);opacity:0;}
100% {transform: rotate(-360deg);opacity:1;}
}
@-webkit-keyframes animated
{
0% {-webkit-transform: rotate(0deg);opacity:0;}
100% {-webkit-transform: rotate(-360deg);opacity:1;}
}
@-moz-keyframes animated
{
0% {-moz-transform: rotate(0deg);opacity:0;}
100% {-moz-transform: rotate(-360deg);opacity:1;}
}
@-o-keyframes animated
{
0% {-o-transform: rotate(0deg);opacity:0;}
100% {-o-transform: rotate(-360deg);opacity:1;}
}
@-ms-keyframes animated
{
0% {-ms-transform: rotate(0deg);opacity:0;}
100% {-ms-transform: rotate(-360deg);opacity:1;}
}
.fancyNav li ul li
{
display:block;
margin:0px;
border-top: 1px solid #989898;
border-bottom: 1px solid #343434;
background:rgba(10, 5, 5, 0.45);
height:30px;
line-height:30px;
width:60px;
}
.fancyNav li ul li:hover{
background:rgba(10, 5, 5, 0.9);
}
li a{
color:#fff;
text-decoration:none;
text-shadow: 0px 1px 0px #000
}
input[type=search] {
-webkit-appearance: none;
outline: none;
}
#searchform {
position: absolute;
rightright: 10px;
bottombottom: 6px;
z-index: 100;
width: 160px;
}
#searchform #s {
outline:none;
width: 80px;
float: rightright;
background: #fff;
border: none;
padding: 6px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;
}
#searchform #s:focus {
width: 150px;
}
footer {
margin-top:400px;
color: #BBBBBB;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display: block;
}

html:
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
<nav>
<ul class="fancyNav">
<li id="home"><a href="#home" class="homeIcon"><div class="home-top"></div><div class="home-top-r"></div><div class="home-door-l"></div><div class="home-door-r"></div></a></li>
<li id="news"><a href="#news">前端设计</a>
<ul>
<li><a href="">HTML5</a></li>
<li><a href="">CSS3</a></li>
<li><a href="">JQUERY</a></li>
</ul>
</li>
<li id="about"><a href="#about">编程语言</a>
<ul>
<li><a href="">PHP</a></li>
<li><a href="">JAVA</a></li>
<li><a href="">wordpress</a></li>
<li><a href="">CodeIgniter</a></li>
</ul>
</li>
<li id="services"><a href="#services">生活</a>
</li>
<li id="contact"><a href="#contact">留言板</a>
</li>
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
<div style="display:block;clear:both;"></div>
</ul>
</nav>
<footer>Tutorial by   <a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a>  ©2013</footer>
</body>
</html>
HTML / CSS 相关文章推荐
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 #HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 #HTML / CSS
css3进行截取替代js的substring
Sep 02 #HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 #HTML / CSS
css3学习心得分享
Aug 19 #HTML / CSS
You might like
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
哪些是python中web开发框架
2020/06/17 Python
python如何实现DES加密
2020/09/21 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
夫妻婚内购房协议书
2014/10/05 职场文书
煤矿安全保证书
2015/02/27 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
解决vue中provide inject的响应式监听
2022/04/19 Vue.js