今天刚看了篇文章《纯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. MySQL的下载和安装

    MySQL的下载 MySQL官网:https://www.mysql.com/ MySQL的安装 https://jingyan.baidu.com/article/6181c3e0d27a57152 ...

  2. oracle 非sys用户创建新用户 授权后 plsql看不到视图

     问题: oracle 非sys用户创建新用户 授权后  plsql看不到视图 答案: 新用户查询视图时,视图名称前需要添加 视图所属用户. 如user用户新建newUser用户,newUser用户查 ...

  3. sql 的REPLACE

    REPLACE 用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法 REPLACE ( 'string_expression1' , 'string_expression2 ...

  4. [LeetCode 题解]：Gray Code

    题目描述: The gray code is a binary numeral system where two successive values differ in only one bit. G ...

  5. Java中的多态方法

    public class Main { public void test(Object o) { System.out.println("Object"); } public vo ...

  6. pipeline+sonar

    前提需要在项目根目录下新建sonar-project.properties文件,内容如下: # must be unique in a given SonarQube instance sonar.p ...

  7. 使用System.Data.SQLite及其EF模块操作SQLite数据库（文件）

    SQLite for .NET (System.Data.SQLite) introduction An ADO.NET provider for SQLite including EF and Li ...

  8. 项目前端打包工具从 NEJ 切换成 webpack

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...

  9. bzoj1833数字计数

    题目链接 找$[1$ ~ $a-1]$和$[1$ ~ $b]$中各数码出现的次数之后相减就是答案 上代码: /********************************************* ...

  10. redis 3.0 集群__使用

    参考文档 http://redis.readthedocs.org/en/latest/topic/cluster-tutorial.html#id5 http://blog.csdn.net/myr ...