<!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. 常用 JavaScript 小技巧及原理详解

    善于利用JS中的小知识的利用,可以很简洁的编写代码 1. 使用!!模拟Boolean()函数 原理:逻辑非操作一个数据对象时,会先将数据对象转换为布尔值,然后取反,两个!!重复取反,就实现了转换为布尔 ...

  2. EntityFramework CodeFirst 学习

    个人学习笔记仅供分享,如有错误还请指出 demo结构:models类库和控制台程序 1.首先在model中建立,ADO.NET 实体数据模型---空模型,然后新建数据实体,并且生成数据库 2.控制台想 ...

  3. 微信小程序自学过程中遇到的问题 转

    view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下:   < view class=" ...

  4. EF 查询数据不读取缓存的解决办法

    EF查询(不使用缓存):Set<T>().AsNoTracking() 今天工作中发现一个很妖的问题,修改产品界面,修改数据后,数据库的值发生变化,感觉掉坑里了. 然后发现读取对象的方法是 ...

  5. DataGridview 绘制行序号

    RowPostpaint 事件   通过Rectangle(矩形的意思)对象绘制矩形区域,然后在通过textRenderer的DeawText方法来绘制序列号. Rectangle(x,y width ...

  6. C++/CLI 本地字符串和托管字符串之间的转换

    参考: https://docs.microsoft.com/zh-cn/cpp/dotnet/overview-of-marshaling-in-cpp #include "msclr/m ...

  7. SpringBoot 之Quartz的使用

    对于Quartz的使用,还是想说一句,SpringBoot真的很好用啊! 第一步:当然是引入依赖啦 <parent> <groupId>org.springframework. ...

  8. 【SSH网上商城项目实战14】商城首页UI的设计

    转自:https://blog.csdn.net/eson_15/article/details/51373403 前面我们利用EasyUI和SSH搭建好了后台的基本框架,做好了后台的基本功能,包括对 ...

  9. K：单例模式中存在的问题

      对于单例模式的实现,无论其是否具有懒加载的功能,我们的目标是有且仅生成一个对象.但是,实际上,对于单例模式的一般实现,都会存在着以下的两个问题: 序列化攻击: 对于枚举方式实现的单例模式,并不存在 ...

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

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