1. [代码] 纯CSS3实现的动感菜单效果 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的动感菜单效果 - 模板巴士www.mobanbus.cn</title>
 
<style type="text/css">
 
* { margin:0;
    padding:0;
}
 
html {height: 100%;}
 
body{
    position: relative;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
 
}
 
.navbox {
    position: relative;
    float: left;
}
 
ul.nav {
    list-style: none;
    display: block;
    width: 200px;
    position: relative;
    top: 100px;
    left: 100px;
    padding: 60px 0 60px 0;
    background: url(images/shad2.png) no-repeat;
    -webkit-background-size: 50% 100%;
}
 
li {
    margin: 5px 0 0 0;
}
 
ul.nav li a {
    -webkit-transition: all 0.3s ease-out;
    background: #cbcbcb url(images/border.png) no-repeat;
    color: #174867;
    padding: 7px 15px 7px 15px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    width: 100px;
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 4px #888;
}
 
ul.nav li a:hover {
    background: #ebebeb url(images/border.png) no-repeat;
    color: #67a5cd;
    padding: 7px 15px 7px 30px;
}
 
</style>
 
</head>
 
<body>
 
<div class="navbox">
<ul class="nav">
<li><a href="">XHTML</a></li>
<li><a href="">C++</a></li>
<li><a href="">Mootools</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">CSS</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Ajax</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Perl</a></li>
</ul>http://www.huiyi8.com/ppt/​
</div>ppt模板
 
<div class="navbox">
<ul class="nav">
<li><a href="">XHTML</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">CSS</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Ajax</a></li>
<li><a href="">PHP</a></li>
</ul>
</div>
 
<div class="navbox">
<ul class="nav">
<li><a href="">XHTML</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">CSS</a></li>
</ul>
</div>
 
</body>
</html>

纯CSS3实现的动感菜单效果的更多相关文章

  1. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  3. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  5. 纯CSS3实现常见多种相册效果

    本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...

  6. 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

  7. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  8. 纯Css3手工打造网页图片效果

    .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...

  9. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

随机推荐

  1. MapReduce源码分析之InputFormat

    InputFormat描述了一个Map-Reduce作业中的输入规范.Map-Reduce框架依靠作业的InputFormat实现以下内容: 1.校验作业的输入规范: 2.分割输入文件(可能为多个), ...

  2. EasyUI分页（前台分页和后台分页）

    整理一下以前的总结: 分页包括前台分页和后台分页两种,针对数据量比较小的,比如说单位,角色等,可以使用前台分页,而针对日志文件这些,需要后台分页. 先说说前台分页吧: function pagerFi ...

  3. JSP HTTP 状态码

    JSP HTTP 状态码 HTTP请求与HTTP响应的格式相近,都有着如下结构: 以状态行+CRLF(回车换行)开始 零行或多行头模块+CRLF 一个空行,比如CRLF 可选的消息体比如文件,查询数据 ...

  4. STL源代码分析--萃取编程（traits）技术的实现

    1.为什么要出现? 依照默认认定.一个模板给出了一个单一的定义,能够用于用户能够想到的不论什么模板參数!可是对于写模板的人而言,这样的方式并不灵活.特别是遇到模板參数为指针时,若想实现与类型的參量不一 ...

  5. Java之Filter

    一.何为Filter? Filter也称之为过滤器,它是Servlet技术中比較激动人心的技术.WEB开发者通过Filter技术.对webserver管理的全部web资源.换句话说其主要用于前台向后台 ...

  6. Python PhatomJS 和Selenium动态加载页面 获取图片内容

    如果您觉得感兴趣的话,可以添加我的微信公众号:一步一步学Python![](http://images2017.cnblogs.com/blog/993869/201711/993869-201711 ...

  7. A/B(逆元)

    A/B Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. nodejs windows下安装运行

    node 官网下载地址http://nodejs.org/  下载自己对应的版本  ,我下的是windows版本 node-v4.1.1-x64.msi 然后 下一步 下一步 就完成安装了,非常简单, ...

  9. spring boot mysql和mybatis

    1 选择mysql驱动 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connecto ...

  10. Jquery定义对象（ 闭包）

    转自:http://www.cnblogs.com/springsnow/archive/2010/06/03/1750832.html 例一:添加对象的静态属性 声明一个对象$.problemWo, ...