<!doctype html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <title></title>

    <meta content="" name="Keywords">

    <meta content="" name="Description">

    <meta name="format-detection" content="telephone=no">

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul,li{

            list-style:none;

        }

        ul{

            width:300px;

            margin:20px auto;

        }

        li{

            height:20px;

            line-height:20px;

            margin-bottom:16px;

            width:100px;

        }

        :after, :before {

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

        }

        a:hover {

            border: 1px solid #367dff;

            color: #1769ff;

            text-decoration: none;

        }

        a {

            border: 1px solid #EDEDED;

            display: block;

            -webkit-transition: all 0.6s ease-in;

            -moz-transition: all 0.6s ease-in;

            -ms-transition: all 0.6s ease-in;

            -o-transition: all 0.6s ease-in;

            transition: all 0.6s ease-in;

            color: #ccc;

            text-decoration: none;

            position: relative;

            height: 100%;

        }

        a:after, a:before {

            content: '';

            display: block;

            position: absolute;

            width: 0;

            height: 0;

            box-sizing: border-box;

            border: 1px solid transparent;

        }

        a:after {

            top: 0;

            left: 0;

            -webkit-transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;

            transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;

        }

        a:before {

            bottom: 0;

            right: 0;

            -webkit-transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;

            transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;

        }

        a:hover:after, a:hover:before {

            width: 100%;

            height: 100%;

        }

        a:hover:before {

            border-bottom-color: #367dff;

            border-left-color: #367dff;

            -webkit-transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;

            transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;

        }

        a:hover:after {

            border-top-color: #367dff;

            border-right-color: #367dff;

            -webkit-transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;

            transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;

        }

    </style>

</head>

<body>

<ul>

    <li>

        <a href="javascript:void (0);">列表1</a>

    </li>

    <li>

        <a href="javascript:void (0);">列表1</a>

    </li>

    <li>

        <a href="javascript:void (0);">列表1</a>

    </li>

</ul>

</body>

</html>

css3实现 鼠标经过li时动态画边框(jq库导航)的更多相关文章

  1. CSS3实现鼠标经过图片时图片放大

    在鼠标经过图片时,图片被放大,而且还有个过渡的效果.... <!DOCTYPE html> <html> <head> <link href="cs ...

  2. Jquery的hover方法让鼠标经过li时背景变色

    来源地址:http://itfish.net/article/29790.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  3. 鼠标经过导航中li时，一个彩色模块跟着鼠标移动

    1.鼠标经过导航中li时,一个活动的li跟随鼠标移动,最终移动到鼠标的停留的位置.(如需鼠标离开后让活动的li回到初始位置,则用jq hover事件,当鼠标离开时,给活动的li设置left是0) 2. ...

  4. 用css3实现鼠标移进去当前亮其他变灰

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery实现滚动时动态加载页面内容

    有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  6. 基于css3的鼠标经过动画显示详情特效

    之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览   源码下载 ...

  7. OpenGL进阶演示样例1——动态画线（虚线、实线、颜色、速度等）

            用OpenGL动态绘制线段.事实上非常easy,但到如今为止.网上可參考资料并不多. 于是亲自己主动手写一个函数,方便动态绘制线段.代码例如以下: #include<GL/glu ...

  8. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  9. CSS 如何实现当鼠标放在上面时整行变色呢？

    摘要:下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: 实现思路:使用:hover伪类,实现当鼠标指向时,其背景色发生相应的变化,如下例所示: 例: 下文中的div,当鼠标放上 ...

随机推荐

  1. vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  2. LOJ #6022. 重组病毒

    Description 支持以下操作 1.access一个点 2.问一个点上面的重链的个数 3.换根 , 并access原来的根 Solution 对于重链个数 , 我们在 \(access\) 的时 ...

  3. RabbitMQ---6、客户端 API 的简介

    1.主要的命名空间,接口和类 定义核心的API的接口和类被定义在RabbitMQ.Client这个命名空间下面: 所以要想使用RabbitMQ的功能,需要以下代码     using RabbitMQ ...

  4. 十、spark graphx的scala示例

    简介 spark graphx官网:http://spark.apache.org/docs/latest/graphx-programming-guide.html#overview spark g ...

  5. linux的目录结构及文件基本操作

    1. linux的文件组织目录结构 linux的目录与window的区别 win以存储介质为主,主要以盘符及分区实现文件 管理,再下面才是目录. linux以树形目录结构的形式来构造整个系统,每一个目 ...

  6. linux端口开放

      netstat 查看端口开放情况: netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 ...

  7. java设计模式-----3、抽象工厂模式

    抽象工厂模式是所有形态的工厂模式中最为抽象和最具一般性的一种形态.抽象工厂模式是指当有多个抽象角色时,使用的一种工厂模式.抽象工厂模式可以向客户端提供一个接口,使客户端在不必指定产品的具体的情况下,创 ...

  8. sublime_text3 快速生成xhtml表头手动设置

    1. 在github上手动下载emmet安装插件 https://github.com/sergeche/emmet-sublime#how-to-install 2.把下载的安装插件放到packag ...

  9. Django实现验证码

    简单搞定生成验证码: 1.views.py from io import BytesIO import random from PIL import Image,ImageDraw,ImageFont ...

  10. 解决Cannot read property 'style' of null中样式问题

    <script type="text/javascript"> function updateTime(){ var timeNow = new Date(); var ...