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. MSP430G2553电子时钟实验

    用msp430g2553控制1602液晶显示时间,并能够通过按键设置时间.我做了正计时和倒计时两种模式 /*********************************************** ...

  2. erlang的斐波那契数列

    [递归和循环] 题目: 大家都知道斐波那契数列,现在要求输入一个整数N,请输出斐波那契数列的第N项,以及前N项. 如:N <=39 下面是斐波那契数列的实现: -module(feibo). - ...

  3. iOS 10 中引入了 Message 框架

    WWDC 2016 上最重磅的消息之一就是在 iOS 10 中引入了 Message 框架.开发者现在可以为苹果内置的 Messages 应用开发扩展啦.通过开发一个应用扩展,你可以让用户跟应用在 M ...

  4. spring BeanFactory加载xml配置文件示例

    项目目录结构如下: HelloWorld.java package com.thief.demo; public class HelloWorld { public void sayHello() { ...

  5. eclipse 给jar包关联javadoc

    1.右键点击Referenced Libraries下的jar --> 选择 Build Path --> Configure Build Path. 2.选择jar的Javadoc lo ...

  6. poj2816

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 29799   Accepted: 12090 De ...

  7. 【BZOJ3488】[ONTAK2010]Highways 扫描线+树状数组

    [BZOJ3488][ONTAK2010]Highways Description 给一棵n个点的树以及m条额外的双向边q次询问,统计满足以下条件的u到v的路径:恰经过一条额外的边不经过树上u到v的路 ...

  8. 【BZOJ4033】[HAOI2015]树上染色 树形DP

    [BZOJ4033][HAOI2015]树上染色 Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并将其他的N-K个点染 ...

  9. Discrete Function(简单数学题)

    Discrete Function There is a discrete function. It is specified for integer arguments from 1 to N (2 ...

  10. iOS11 push控制器tabbar上移问题

    解决方法 - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated { // 如果有大 ...