<!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. xcopy命令的其他参数

    xcopy /s /e /h "c:\123" "D:\123\" 后面多一个斜杠,让程序知道是目录 以下还给您提供了 xcopy 命令的其他参数: /A 仅复 ...

  2. Knockout.js Text绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  3. android inflate压力泵，将视图发生整合的过程

    转自:https://blog.csdn.net/u012702547/article/details/52628453?utm_source=copy inflate方法从大范围来看,分两种,三个参 ...

  4. Bash on windows从14.0升级到ubuntu16.04

    升级参考:https://www.zhihu.com/question/49411626 解决中文乱码问题参考:http://www.lofter.com/tag/ubuntu%E5%AD%90%E7 ...

  5. stringstream快速实现String和int之间的转换

    需要包含头文件”sstream” #include <iostream> #include <string> #include <sstream> using na ...

  6. HDU 2199 (二分法)

    主要思想就是两端逼近,最后得到结果,0MS #include <iostream> #include <cstdlib> #include <cstdio> #in ...

  7. [HNOI2006]最短母串问题

    题目大意:给定一个字符串集,求一个最短字串,使得该集合内的串都是该串的一个子串 算法:AC自动机+最短路+状压DP 注意空间限制 #include"cstdio" #include ...

  8. Postman-关于设置

    用Postman的时候由于没有中文版,所以想设置的完全符合自己的使用习惯不太容易,于是找了下关于设置的使用并转载记录一下,链接:https://www.jianshu.com/p/518ab60ebe ...

  9. js Object 的冻结、密封、扩展的相同以及不同点

    Object.freezed() 冻结 检查函数 Object.isFrozen(obj) Object.seal() 密封   检查函数 Object.isSealed(obj) Object.pr ...

  10. [HttpException (0x80004005): 应用程序已预编译，因此不允许使用目录“/App_Code/”。]

    删除网站下的PrecompiledApp.config文件即可.