今天刚看了篇文章《纯CSS实现的outline切换transition动画效果》

里面的效果研究了一下，下图为实现时的效果

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    .focus-trans{

        position: absolute; 
        // 那个移动的外发光的框框的初始位置和大小

        left: 99px;

        top: -100px;

        width: 100px;

        height: 30px;
 　　　　// Chrome浏览器下使用浏览器自带的focus效果，这里的5px其实是酱油

        outline: 5px auto -webkit-focus-ring-color;
　　　　// IE10+, FireFox浏览器下蓝色的蓝色框框效果（模拟Safari）

        box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset;

        -webkit-box-shadow: none;

        border-radius: 3px;
　　　　// 为的是失去焦点时候，框框立即消失

        -webkit-transition: none;

        transition: none;
　　　　 // Firefox有bug，所以这里补丁了下

        -moz-transition: all .15s;

    }

    form .num:focus ~.focus-trans{ 

        width: 200px;

        height: 30px;

        left: 70px;

        top: 35px;

    }

    form .psw:focus ~.focus-trans{ 

        width: 200px;

        height: 30px;

        left: 70px;

        top: 75px;

    }

    form .submit:focus ~.focus-trans{ 

        width: 100px;

        height: 30px;

        left: 21px;

        top: 116px;

    }

    form input{

        background-color: #ddd;

        border:none;

        margin-bottom:3%;

    }

    form .num{

        width:200px;

        height:30px;

    }

    form .psw{

        width:200px;

        height:30px;

    }

     form .submit{

        width:100px;

        height:30px;

    }

</style>

<body>

   <fieldset>

       <legend>测试效果</legend>

       <form action="">

            账号：<input  type="text" class="num"><br/>

            密码：<input type="text" class="psw"><br/>

            <input type="button" class="submit" value="确认">

            <div class="focus-trans"></div>

        </form>

   </fieldset>

</body>

<script>

</script>

</html>

听说还有一个flying-focus.js 可以实现这种效果

评价：

使用很简单，只要在页面上加载了下面这个JS: flying-focus.js 就可以实现Tab切换焦点框的时候，焦点框是飞过去的~~

看上去很酷。

不过，对于实际的对外项目而言，价值并不大。首先是兼容性，其次是JS依赖，再者是全局处理（影响页面所有元素）。由于借助pointer-events:none，只有Chrome以及Safari支持。不过，在一些特殊或重要的表单上使用这种增强的交互可能会有出彩的效果。也就是只适合局部使用。或者在个人网站上用用。对于大多数内网项目，华而不实的效果没有任何意义。

相比JS方法，我这里的CSS只是针对demo中的表单有效果，支持的浏览器多了一类，就是IE10+.

使用了focus伪类和相邻选择器对外发光的元素进行了位置和尺寸的控制，配合transition就有了动画效果啦！

上为原作者的阐述

本文参考自：http://www.zhangxinxu.com/wordpress/2013/11/%E7%BA%AFcss-focus-outline-%E5%88%87%E6%8D%A2-transition-%E5%8A%A8%E7%94%BB/

css3中outline切换动画效果的更多相关文章

  1. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  2. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  3. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  4. Android 动画之View动画效果和Activity切换动画效果

    View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...

  5. react实现页面切换动画效果

    一.前情概要 注:(我使用的路由是react-router4)     如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升:     but the 问题是 ...

  6. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  7. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  8. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  9. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

随机推荐

  1. C++ springf（）的用法（转）

    转:http://blog.csdn.net/masikkk/article/details/5634886 在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望.由于sprin ...

  2. win10登录不上sql2005

    因需求安装了一个SQL Server 2005. 登录的时候,用户Sa模式可以登录,Windows身份验证方式却无法登录. 经测试.解决方法如下: SQL Server Management Stud ...

  3. delphi Ini读写

    try ini := TIniFile.Create(GetCurrentDir+'\BackServiceSetting.ini'); {ini 对象建立需要文件路径参数, 如果缺少路径会默认Win ...

  4. 安装和使用 Elasticsearch(1.1.1)+marvel插件、Kibana插件

    Elasticsearch是开源搜索平台的新成员,实时数据分析的神器,发展迅猛,基于 Lucene.RESTful.分布式.面向云计算设计.实时搜索.全文搜索.稳定.高可靠.可扩展.安装+使用方便,介 ...

  5. Windows7中7种不同关机模式介绍

    在Win7关机选项中一共有7种关闭方式,分别为 Switch user(切换用户), Log off(登出), Lock(锁定), Restart(重启), Sleep(睡眠), Hibernate( ...

  6. SCPO2015 小凸玩矩阵

    题目链接:戳我 二分答案+最大流. 看到第K大的数的最小值是多少,我们想到二分,把他转化为最大数最小问题--二分一个数x,如果有>=n-k+1个数不比它大,那么它就应当不大于当前数,否则应当大于 ...

  7. [Winter Vacation] 语文实词虚词练习册答案

    下载通道: [120个文言文实词小故事] [18个文言文虚词小故事] 120个文言文实词小故事 爱   楚人爱(宠爱)其子,虽爱(吝惜)钱财,于其子之求而无不应.其子成人,有陶氏之风独爱(喜爱)菊,众 ...

  8. Java面向对象之异常（throw与throws）

    一.基础概念 1.throw和throws的区别: 位置不同:throws用在函数上,后面跟的是异常类,可以跟多个. throw用在函数内,后面跟的是异常对象. 功能不同:throws用来声明异常,让 ...

  9. 使用git提交代码简单说明

    一. 图形化git 1.首先下载msysgit,和 tortoisegit, 先装msysgit再装小乌龟 2.运行git按照github上说明生成秘钥对     ssh-keygen -t rsa ...

  10. P4173 残缺的字符串

    题目链接 题意分析 啥 ? ? ? \(FFT\)做字符串匹配 可是就是这样 我们定义匹配函数 我们定义\(A\)是匹配串 \(B\)是被匹配串 我们当前到达\(B\)串的\(x\)位置 \[P(x) ...