<!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. S 配置邮箱

  2. php7源码编译安装

    以下以CentOS 7.2为例,安装php的运行环境,首先打开php官网http://php.net/点击导航栏的Downloads进入下载页面:http://php.net/downloads.ph ...

  3. Educational Codeforces Round 54

    这套题不难,但是场上数据水,导致有很多叉点 A. 因为是让求删掉一个后字典序最小,那么当a[i]>a[i+1]的时候,删掉a[i]一定最优!这个题有个叉点,当扫完一遍如果没有满足条件的,就删去最 ...

  4. jquery中的属性和样式设置

    添加属性 $target.attr({"title":"one piece","name":"solgan"}); 为目 ...

  5. 🔸RU大神手册上要再“做”的题🔸

  6. 2-ubuntu下访问window的磁盘

    双系统Ubuntu无法进入Windows磁盘的解决方法 有些用户在电脑上安装了Ubuntu和Win10的双系统,正常情况下Ubuntu是可以正常访问Windows磁盘的.但是有些用户就是无法再Ubun ...

  7. [GO]go使用contextCancel

    package main import ( "fmt" "context" ) func main() { gen := func(ctx context.Co ...

  8. srping boot thymeleaf 学习总结 (2) - thymeleaf properties 国际化 mesaage

    thymeleaf获取配置properties中的数据与thymeleaf国际化(摘录) 使用thymeleaf提供的国际化 有时候会有直接在模板中获取配置文件properties中的配置信息,比如: ...

  9. Hadoop学习【一】单机版搭建

    首先要说一下,Hadoop 2.x版本以后的改动,在这里帖一篇文章,觉得写的不错. http://www.ibm.com/developerworks/cn/opensource/os-cn-hado ...

  10. nohup、&、setsid、fork和fg、bg究竟有啥区别？

    目录 目录 1 1. 名词解释 1 2. 什么是守护进程? 2 2.1. 后台运行 2 2.2. 解释关系 2 3. 以"&"方式运行有何问题? 2 4. fork 2 5 ...