<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
color: #000;
text-decoration: none;
}
body{
background: #000;
height: 2000;
}
em{
font-style: normal;
}
#wrap{
width: 160px; position: fixed;/*固定定位*/
right: 0;
}
#wrap a{
display: block;/*行转块*/
line-height: 30px;
border-bottom:2px solid #ddd ;/*下边框 粗细 样式 颜色*/
background: #fff;
position: relative;/*参照物 找父级*/
padding-left: 34px;
right: -130px;
}
#wrap a em{
display: block;
width: 30px;
height: 30px;
background: #0066cc;
color: #fff;
font-weight: bold;
text-align: center;
position: absolute;/*绝对定位 改变盒子的位置*/
left: 0;
}
#wrap a:hover{
color: #50C3EB;
}
#wrap a:hover em{
background: #459DF5;
}
</style>
</head>
<body>
<div id="wrap">
<a href="#"><em>0</em>HTML</a>
<a href="#"><em>1</em>JAVASCRIP</a>
<a href="#"><em>2</em>JAVA</a>
<a href="#"><em>3</em>ACTIONSCRIPT</a>
<a href="#"><em>4</em>Perl</a>
<a href="#"><em>5</em>PHP</a>
<a href="#"><em>6</em>NODE.JS</a>
<a href="#"><em>7</em>GO</a>
<a href="#"><em>8</em>C#</a>
<a href="#"><em>9</em>C++</a>
<a href="#"><em>10</em>PHP</a>
<a href="#"><em>11</em>ACTION</a>
<a href="#"><em>12</em>SCRIPT</a>
</div>
</body>
</html>
<script type="text/javascript" src="jQuery/jquery-3.1.1.min.js"> </script>
<script type="text/javascript">
/**
*
*/
var timer = null;
$('#wrap').hover(function(){
//鼠标滑入
var This = $(this);//
timer = setTimeout(function(){
This.find('a').each(function(i){
var $This = $(this);//当前a
setTimeout(function(){
$This.animate({right:'0px'},300);
},i*50);
});
},300);//定时器
},function(){
//鼠标滑出
if(timer){
clearTimeout(timer);
}
This = $(this);//
$(this).find('a').each(function(i){
var $This = $(this);//当前a
setTimeout(function(){
console.log();
$This.animate({right:'-130px'},300);
},i*50);
});
});//鼠标划过
</script>
<!-- a标签 行内元素 不能设置宽高 display: block; 行转块元素 会换行
浮动 定位会使元素脱离文档流
-->

[CSS3] 边栏导航动画的更多相关文章

  1. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  2. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  3. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  4. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  5. css3制作左右拉伸动画菜单

    微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...

  6. CSS3全览_动画+滤镜

    CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...

  7. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  8. css3实现循环执行动画,且动画每次都有延迟

    一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...

  9. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

随机推荐

  1. go_gc

    如果想知道当前的内存状态,可以使用: // fmt.Printf("%d\n", runtime.MemStats.Alloc/1024) // 此处代码在 Go 1.5.1下不再 ...

  2. Python_01-入门基础

    以后我会发表一系列python脚本的学习资料,python版本为2.x. 目录: 1 Python入门基础 1.1 学习资源 1.2 所有语言的入门程序---Hello World!  1.3 帮助函 ...

  3. Inclusion–exclusion principle(动态规划)

    QUESTION: 把(2, 3, 5, 7)称为primes,能被primes整除的我们称之为Walprimes,比如 -21, -30, 0, 5, 14 是, 而-121, 1, 143 etc ...

  4. 使用matplotlib画双纵轴坐标

    一.前言 本文主要使用matplotlib,实现双纵轴坐标的图表绘制.笔者python版本为2.7.15. 二.实践及效果 1. 需求 某个有这么一个成绩表,分别是名字,本次成绩以及进步幅度,现在需要 ...

  5. 配置Linux防火墙

    配置防火墙(服务器安全优化)(转) 安全规划:开启 80  22 端口并 打开回路(回环地址 127.0.0.1) # iptables –P INPUT ACCEPT # iptables –P O ...

  6. [Jmeter]让报告在邮件中以链接进行显示,通过IIS

  7. [Selenium]怎样等待元素出现之后再消失,譬如Loading icon

    界面上有些元素是要先等它出现,再等它消失,譬如loading icon 这个是等多个loading icon出现后消失 /** * Wait for loading icon disappear in ...

  8. 邹欣,现代软件工程讲义:单元测试&回归测试

    http://www.cnblogs.com/xinz/archive/2011/11/20/2255830.html 邹欣, 现代软件工程讲义 2 开发技术 - 单元测试 & 回归测试

  9. 14 Finding a Shared Motif

    Problem A common substring of a collection of strings is a substring of every member of the collecti ...

  10. Javascript 知识遗漏点梳理。

    先说一下我之前学习Javascript的学习经历,然后就是最近几天学到以前没有注意的知识遗漏点. 1.之前的学习经历和方法: 最开始是看了Javascript DOM编程与艺术这本书,把慕课网上的&l ...