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. shell中的括号作用

    一.小括号,圆括号() 1.单小括号 ()    ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有 ...

  2. csv文件中出现乱码的解决方法

    1.首先用UE打开CSV文件,发现没有乱码了. 2.然后新建一个txt文本,把CSV中的数据复制到txt文本中,保存格式为ANSI/ASCII. 3.复制txt文件,再把副本后缀改为CSV格式,再用E ...

  3. java中已经排序的列表中插入新值

    static List<Integer> insertSortedList(){ List<Integer> nums = new ArrayList<Integer&g ...

  4. VMware Mac OS补丁安装

    安装了VMware9.0在新建虚拟系统的时候,没有Appel MAC OS系统的选项,上网查了一下是需要打一个VMware Mac OS补丁就可以了.下面我来演示一下VMware Mac OS补丁怎么 ...

  5. emacs的常用配置备份

    据说有人搞丢了自己的emacs的配置,然后一怒之下抛弃了emacs投身vim,我还是做个emacs配置的备份吧, 虽然我现在也算不上emacs的发烧友. 这里的配置大多是从网上参考的,最多的是下面的链 ...

  6. sql with 递归查询

    用with实现递归查询 1.数据准备 假定有一个表DiGui,有两个字段Id int ParentId int Id ParentId 4 0 5 0 7 0 2 1 8 5 15 5 9 7 14 ...

  7. Huffman编码（Huffman树）

    [0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在 理解 "Huffman编码(Huffman树)" 的idea 并用源代码加以实现: 0.2) ...

  8. Android数据适配器(Adapter)优化：使用高效的ViewHolder

    原文链接:http://stackvoid.com/using-adapter-in-efficiency-way/ 在使用Listview或GridView的时候,往往须要自己定义数据适配器.一般都 ...

  9. Intellij idea subversion checkout error

    Subversion 1.8 and IntelliJ IDEA 13 Unlike its earlier versions, Subversion 1.8 support uses the nat ...

  10. iOS开发 Xcode8 问题

      一.证书管理 用Xcode8打开工程后,比较明显的就是下图了,这个是苹果的新特性,可以帮助我们自动管理证书.建议大家勾选这个Automatically manage signing(Ps.但是在b ...