今天刚看了篇文章《纯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. 阿里云云主机添加swap分区与swap性能优化

    1.swap的功能与相应内核参数 Linux 将物理内存分为内存段的部分被称作“页面”.交换是指内存页面被复制到预先设定好的硬盘空间(叫做交换空间)的过程,目的是释放用于页面的内存.物理内存和交换空间 ...

  2. C++ 内敛函数

    在主调函数调用函数时,先将现场压入栈以保存现场-转去执行被掉函数-返回主调函数.现场出栈以恢复现场-继续往下执行. 为了减少函数调用的成本,特别是对于小型函数,C++提供了内敛函数(inline).C ...

  3. RAD Studio Demo Code和几个国外FMX网站 good

    FireMonkey X –  Amazing overview of FireMonkey FMX Feeds – All your FireMonkey news in one place FMX ...

  4. 在Centos 7 上面 安装MySQL 5.7 简录

    In a web browser, visit mysql.com page: https://dev.mysql.com/downloads/repo/yum/ Locate the desired ...

  5. 长按tools Icon 弹出Tips音效

    快速点击,还没弹出tips,bubble音效已播放 在 Widget_ToolsTips 的 OnAwake 函数加一个延时 transform:DOScale(1, 0.1):OnComlete(f ...

  6. ZKEACMS for .Net Core 深度解析

    ZKEACMS 简介 ZKEACMS.Core 是基于 .Net Core MVC 开发的开源CMS.ZKEACMS可以让用户自由规划页面布局,使用可视化编辑设计“所见即所得”,直接在页面上进行拖放添 ...

  7. 冒泡排序算法 ：BubbleSort

    java中的经典算法:冒泡排序算法 $. 可以理解成当你静止一杯可乐时,里面的CO2随着你的静止,由于不不易溶于水的性质, 且会以气泡的形式逐渐向上漂浮.越大的气泡上浮速度越快. 冒泡排序算法的原理于 ...

  8. VMware安装linux系统报错：已将该虚拟机配置为使用 64 位客户机操作系统。但是，无法执行 64 位操作。

    检测问题所在: 下载LeoMoon CPU-V 检查一下CPU VT-x状态是否启用 地址:http://download.csdn.net/detail/qq_22860341/9858011 如果 ...

  9. springmvc初步配置

    导包/添加依赖: <dependency> <groupId>org.springframework</groupId> <artifactId>spr ...

  10. [spring] spring 装配Bean

    Bean的配置信息是Bean的元数据信息.包括1.Bean的实现类.2.Bean的属性信息.3.Bean的依赖关系.4.Bean的行为配置(比如控制Bean的生命周期中init,destory方法). ...