<!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. sql注入及事务

    Statement会有一个关于sql注入的bug ,所以基本不使用 一般使用PreparedStatement import java.sql.Connection;import java.sql.P ...

  2. Redis 授权操作

    [Redis 授权操作] AUTH password 通过设置配置文件中 requirepass 项的值(使用命令 CONFIG SET requirepass password ),可以使用密码来保 ...

  3. 判断viewpager左右滑动方向

    实现思路就是通过viewpager的滑动监听,用参数position进行比较,同时当判断完这个要把比较的positon覆盖.这里简单介绍一下public void onPageScrolled(int ...

  4. 单词的添加与查找 · Add and Search Word

    ［抄题］: 设计一个包含下面两个操作的数据结构:addWord(word), search(word) addWord(word)会在数据结构中添加一个单词.而search(word)则支持普通的单词 ...

  5. oracle忘记密码，修改密码

    1:输入命令: sqlplus /nolog ,进入oracle控制台,并输入 conn /as sysdba;以DBA角色进入.2:若修改某一个用户密码, 修改用户口令 格式为:alter user ...

  6. java集成支付宝移动快捷支付时报错java.security.spec.InvalidKeySpecException: java.security.InvalidKeyException: IOException : algid parse error, not a sequence

    出错原因是代码中的私钥设置错误,不是填原始的私钥,而是转换为PKCS8格式的私钥(Java格式的) ,改成后就会报创建交易异常了

  7. Nginx搭建后，图片存储在Tomcat上，前端无法回显图片问题

    一.Nginx与Tomcat连接搭建的环境,Nginx设置了前端的访问路径为 (1)前端代码配置: root /usr/local/nginx/html; index index.html index ...

  8. ldap域账号登录

    $host = "iflytek.com"; $user = 'yimiao@'.$host;//'用户名@域名'; $pswd = "******"; //1 ...

  9. linux上chrome、vlc等程序root不能运行的解决办法

    which vlc 或者 whereis vlc 输入/geteuid,输入i进入输入模式,将geteuid改成getppid,然后ESC,输入wq,保存退出,这样程序root用户就可以运行了. ch ...

  10. 检查路径是否存在与创建指定路径（mfc)

    检查路径是否存在 if (access("D:\\Work\\Encryption\\DES", 0)) 为真,则路径不存在 创建指定路径 system("md D:\\ ...