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. sudo保持环境变量

    编译Linux内核的最后是make modules_install install,这两个一般都需要root权限,即sudo,而一般我交叉编译内核时都是在.bashrc中export ARCH=arm ...

  2. Android下的数据存储与访问、权限

    弹出吐司 在onCreate中可以先获取控件对象 /data/data/程序的包名/          在这个目录下面进行文件的读写可能因为包名的改变而变得不可靠. this可以是Activity,也 ...

  3. 从零开始学android -- dialog

    先看个效果图 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <Linear ...

  4. 第4章 URL管理器和实现方法

    URL管理器:管理待抓取URL集合和已抓取URL集合 -- 防止重复抓取.防止循环抓取 URL需要支持哪些功能: 添加新URL到待爬取集合中.判断待添加URL是否在容器中,判断是否还有待爬取URL,获 ...

  5. Android自定义属性format类型

    1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name = "名称"> <attr name = &quo ...

  6. hdu_1226超级密码(BFS)

    超级密码 Problem Description Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息:密码是 ...

  7. EasyDSS流媒体服务器灵活地帮助用户实现摄像机RTSP转RTMP直播功能

    简要描述 今天突然接到国内某上市公司同事打来的技术咨询电话,经过简单的沟通,大概所描述的需求是: 1.目前现场有非常多的摄像机资源需要接入: 2.需要将摄像机的RTSP流转成RTMP流接入到微信小程序 ...

  8. vs05字节对齐问题又一不小心就弄去了我一个下午的时间

    由于一字节的对齐问题,我调一个库调了我基本一个下午..... 犯错其实并不可怕, 可怕的是你一犯再犯...... 这也算得上是难能可贵... /Zp (Struct Member Alignment) ...

  9. full stack on the road

    Full Stack, I'm coming. 有人说全栈只是个理想情况,但我不这么认为,因为好多思想是想通的, 比如 OO.函数式编程.设计模式... 也有人说搞全栈的人样样普通,可是为嘛我在学习j ...

  10. Java中List.remove报UnsupportedOperationException异常

    今天项目中有个需求场景: A和B都是List,而B是A的子集,现在想求A和B的差集. 想到了List中提供的removeAll()方法可以求得差集,但是结果确报了UnsupportedOperatio ...