<!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. Openstack 组件简介

    1. Nova 计算服务: 负责承载和管理云计算系统 其中nova-compute service 通过调用Hypervisor APIs创建和终止虚拟机实例. 虚拟化技术: KVM和Xen 2. N ...

  2. Kubernetes的UI界面Kubernetes Dashboard的搭建

    1.搭建准备 Kubernetes集群的安装部署 2.搭建过程 2.1.在master节点上创建kubernetes-dashboard.yaml cd /etc/kubernetes vim kub ...

  3. 23.Merge k Sorted Lists (Array, Queue; Sort)

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 思 ...

  4. 给我们的Empty Object加个图标

    Gizmos.DrawIcon (transform.position, "1.png", true);

  5. jQuery的event事件

    1.冒泡和默认行为 <div class="aa"> <div class="bb"> <div class="cc&q ...

  6. Node节点部署

    一.部署kubelect 二进制包准备 将软件包从linux-node1复制到linux-node2.linux-node3中去 [root@linux-node1 ~]# cd /usr/local ...

  7. 发现ramnit样本一枚

    https://files.cnblogs.com/files/yfish/DesktopLayer.rar

  8. [Selenium]对于某些对话框即有可能弹出来，也有可能不弹出来，这种应该怎么处理呢？

    界面上如果有一个对话框可能弹出来,也可能不弹出,我们都要认为是正常,应该怎么处理呢? /** * check if release notes dialog present * @author j * ...

  9. windows聚焦图片文件重命名bash脚本

    win10聚焦路径为: %localappdata%\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalStat ...

  10. GPS坐标转换为百度地图坐标

    /** * GPS坐标转换为百度地图坐标 * 需要引入javabase64.jar 和json的一些包 * */ public class Gps2BaiDu { public static void ...