<!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. C# 之正则表达式运用

    C#正则验证大全 Regex.IsMatch()正则表达式验证 需要引入命名空间 using System.Text.RegularExpressions;    #region 验证文本框输入为数字 ...

  2. xsl 和xml transform方法的调用

    xsl 和xml生成html,兼容多个浏览器 <html> <head> <meta charset="UTF-8"/> </head&g ...

  3. docker启动容器报错：IPv4 forwarding is disabled. Networking will not work

    报这个错误会导致宿主机以外的pc 访问不了容器 按照网上的解决办法: 在/usr/lib/sysctl.d/00-system.conf文件后加net.ipv4.ip_forward=1 即可 然后重 ...

  4. 类库项目如何既能支持netcore2.0,也能支持net4.5

    手动更改项目配置 .csporj 中的代码 <TargetFramework>netcoreapp2.</TargetFramework> 改成 <TargetFrame ...

  5. 有标号的DAG计数系列问题

    传送门 II 设 \(f_i\) 表示 \(i\) 个点的答案 那么枚举至少 \(j\) 个点的出度为 \(0\) \[\sum_{j=0}^{i}(-1)^j\binom{i}{j}f_{i-j}2 ...

  6. bootstrap学习笔记(网页开发小知识)

    这是我在学习Boostrap网页开发时遇到的主要知识点: 1.导航条navbar 添加.navbar-fixed-top类可以让导航条固定在顶部,固定的导航条会遮住页面上的其他内容,除非给<bo ...

  7. Architecture And Framework

    高屋建瓴 From Up to Down. Outside into inside. Interface-Oriented Framework with dynamic configuration. ...

  8. Microsoft Visual Studio 2010下log4cplus的安装，集成，测试

    原文:http://blog.csdn.net/eclipser1987/article/details/6904301 log4cplus是C++编写的开源的日志系统,功能非常全面,用到自己开发的工 ...

  9. Hibernate_Validator学习

    1.   Hibernate Validator介绍 1.1   背景 在任何时候,当你要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情.应用程序必须通过某种手段来确保输入进来的数据从 ...

  10. MooseFS安装部署

    环境信息 Master服务器 dev04 chunkserver服务器 dev02.dev03.dev04 metalogger服务器 dev03 mount客户端 dev01.dev02 安装前下载 ...