<!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. JAVA练手--异常

    1. 基本的 public static void main(String[] args) { //1. try catch基本用法 { try{ int[] intA = new int[2]; i ...

  2. 安装node.js webkit环境[一]

    1. 安装node,设置代理npm config set registry https://registry.npm.taobao.org[cmd运行]2. 安装grunt-cli: npm inst ...

  3. mysql 中优化数据类型的三个原则

    数据类型越小越好 在业务够用的情况下,尽可能选取小的数据类型.不仅占用空间小,而且执行查询等操作时性能好. 越简单越好 对于简单的类型,在处理时会占用更少的 CPU 周期. 例如,整数就比字符类型简单 ...

  4. Influxdb的存储引擎

    创建Influxdb数据库时,我们可以看到下面选项,每个选项的含义就是本文要描述的: Influxdb内部数据的存储可以使用不同的存储引擎.当前0.8.7版本支持的是LevelDB, RocksDB, ...

  5. springboot开篇 （一）简单邮件发送

    上篇终结篇为spring 发送邮件,这次将使用springboot 发送邮件,同时本篇将作为springboot入门篇. 新建一个工程..工程目录结构如下,此次使用idea进行开发.对于一个长期使用e ...

  6. csharp:search and Compare string

    /// <summary> /// 涂聚文 /// 2011 捷为工作室 /// 缔友计算机信息技术有限公司 /// </summary> /// <param name ...

  7. 爬虫必备—requests

    Requests 是使用 Apache2 Licensed 许可证的 基于Python开发的HTTP 库,其在Python内置模块的基础上进行了高度的封装,从而使得Pythoner进行网络请求时,变得 ...

  8. Apache 2 解析html中的php

    Ubuntu下安装Apache 2无法解析html中的php Ubuntu下安装了Apache 2却无法解析html中的php ,好多说是在httpd.conf文件中修改代码,但是ubuntu中没有这 ...

  9. Python库安装注意事项

    由于一些python库依赖其它库或者其它组件,因此,在使用pip3命令安装python库的时候,经常会报错,告知缺失哪些组件. 但是, 开启VPN后,就没有再碰到类似错误,相关组件都是自动被安装. 因 ...

  10. HttpStatus

    /* * Copyright 2002-2017 the original author or authors. * * Licensed under the Apache License, Vers ...