<!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. clr相关名词

    程序集:一个或多个类型定义文件和资源文件的集合 Native Code(本机代码): 已被编译为特定于处理器的机器码的代码. 本地代码(native code)是计算机编程(代码),编译用来运行一个特 ...

  2. LevelDB 的缺憾

    [LevelDB 的缺憾] 1.Snapshots 只能通过 DB::GetSnapshot() 创建,意即只能创建当下的 Snapshot. 2.

  3. 多线程中，ResultSet为空，报错空指针

    最近在数据库查询数据时,由于数据量太大,使用了多线程,通过线程池建了好几个线程,然后调用了一个封装好的jdbc查询语句. 结果在多线程中,ResultSet报错空指针. 仔细查阅后,才发现多个线程访问 ...

  4. lib

    E:\\Qt\\Qt5.12.2\\5.12.2\\msvc2017_64\\lib\\ ------------------------------------------------------- ...

  5. [leetcode]134. Gas Station加油站

      There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. Y ...

  6. DSOframer 的简单介绍和资源整理（2015-09-02重新整理）

    DSOframer 是微软提供一款开源的用于在线编辑 Word. Excel .PowerPoint 的 ActiveX 控件.国内很多著名的 OA 中间件,电子印章,签名留痕等大多数是依此改进而来的 ...

  7. golang之递归

    翠花,上代码 package main import ( "fmt" "time" ) /* 递归原则,一个大问题分解成相似的小问题 定义好出口条件,否则死循环 ...

  8. 修改数据库中的内容报错：PropertyAccessException:Null value was assinged to a property of primitive type setter of

    错误原因:totalTime的类型为int,数据库中为NULL,int 类型不能赋值为NULL,只能为0,所以报此异常. 解决方案:将totalTime的类型改为Integer,或者初始化为0

  9. JQuery中button提交表单报TypeError: elem[type] is not a function jquery

    错误: TypeError: elem[type] is not a function jquery 解决: 出现这种现象的原因是,提交的表单中,有标签的name,有以submit命名的 name中不 ...

  10. linux每天一小步---find命令详解

    1 命令功能 find命令用于搜索指定目录下的文件,并配合参数做出相应的处理. 2 命令语法      find  搜索路径pathname 选项option [-exec -ok -print  执 ...