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. k8s部署nginx集群

    环境: 两台虚拟机, 10.10.20.203 部署docker.etcd.flannel.kube-apiserver.kube-controller-manager.kube-scheduler ...

  2. 【demo练习二】：WPF依赖属性的练习

    2016-10-11 依赖属性demo小样: 要求:在窗口中点击按钮,利用设置“依赖属性”把Label和TextBox控件里的属性值进行改变. ============================ ...

  3. diamond源码阅读-目录监控

    PathNode(Path)StandardWatchEventKind(WatchEvent)Watchable(WatchKey WatchService WatchEvent)WatchKey( ...

  4. C语言基础知识【基本语法】

    C 基本语法1.C 的令牌(Tokens)C 程序由各种令牌组成,令牌可以是关键字.标识符.常量.字符串值,或者是一个符号.2.分号 ;在 C 程序中,分号是语句结束符.也就是说,每个语句必须以分号结 ...

  5. 自定义 ViewController 容器转场

    本文转载至 http://blog.csdn.net/yongyinmg/article/details/40621463 在话题 #5 中,Chris Eidhof 向我们介绍了 iOS7 引入的新 ...

  6. excel生成随机数

    这个功能可以通过excel来实现,操作步骤如下:       1.新建一个excel,并打开       2.选中一个单元格,在单元格中填写:    =20*RAND()+30  确定之后就会发现已经 ...

  7. Centos 6 安装 python2.7 和 pip

    一.安装 python2.7 [root@crazy-acong ~]# cd /data/tools/ [root@crazy-acong tools]# yum groupinstall &quo ...

  8. [POI2006]SZK-Schools

    [POI2006]SZK-Schools luogu #include<bits/stdc++.h> using namespace std; const int N=405,M=1e5+ ...

  9. Android系统移植与调试之------->安装apk时出现错误Failure [INSTALL_FAILED_DEXOPT]问题解决的方法

    在android4.0源码里面编译出来apk后,用adb install (或adb install -r 重装)安装时,报错[INSTALL_FAILED_DEXOPT]. xu@xu-PC:~$ ...

  10. 【翻译自mos文章】在重建控制文件之前应该考虑的事情

    在重建控制文件之前应该考虑的事情 来源于: Things to Consider Before Recreating the Controlfile (文档 ID 1475632.1) 适用于: Or ...