<!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. nyoj36-最长公共子序列 （LCS）

    http://acm.nyist.net/JudgeOnline/problem.php?pid=36 最长公共子序列 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 ...

  2. 寻找hash值——把int array看成是一个整数

    QUESTION: Write a class DominoChecker that has a method called addBox(int[]) that takes a box of fiv ...

  3. SQL server2008零基础学习

    SQL 基础 数据库简介: 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今五十年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅是存储和管 ...

  4. 单源最短路：Bellman-Ford算法 及 证明

    描述: 求图中某一点到其他任一点的最短距离. 操作: 1. 初始化 结果保存在一个dist数组里,源点的结果初始化为0,其他初始化为无穷大(如INT32_MAX). 2. 计算: 两重for循环,第一 ...

  5. leetcode 63 不同的路径2

    描述: 从左上角走到右下角,中间可能有若干阻碍: 题目给出一个矩阵,0表示可以走,1表示有障碍. 解决: 思路同第一题,只是如果上面或左边有障碍,自身不一定能走,注意些边界条件即可,复杂度仍是m*n. ...

  6. 判断单选框选中不成功，$("#xx").attr("checked")undefined

    判断单选框选中状态,各种都不行,受到https://www.cnblogs.com/yxwkf/p/4853014.html 的启发,相关引用: 原来.在jquery1.6版本号便对此做出了改动: [ ...

  7. mysql 开通远程连接

    使用localhost好用,但是改成ip地址后不好用,执行sql语句做如下修改: update user set host = '%' where user = 'root'; flush privi ...

  8. （广搜）Dungeon Master -- poj -- 2251

    链接: http://poj.org/problem?id=2251 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2137 ...

  9. Tomcat项目部署问题记录

    Tomcat项目部署问题记录 1. -bash: ./startup.sh: Permission denied 问题: 新装tomcat后,执行启动命令会出现 -bash: ./startup.sh ...

  10. Codeforces 768A Oath of the Night's Watch 2017-02-21 22:13 39人阅读 评论(0) 收藏

    A. Oath of the Night's Watch time limit per test 2 seconds memory limit per test 256 megabytes input ...