今天刚看了篇文章《纯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. 开发.NET Core NuGet包并实现CI/CD

    实际开发中我们需要对一些公共类库进行开发,并基于Jenkins进行CI/CD(CI:持续集成,CD:持续部署),其他项目通过NuGet引用.上文讲述了如何搭建本地NuGet服务器并发布NuGet包,这 ...

  2. S.O.L.I.D原则

    SILID原则: 是面向对象编程和设计的重要原则,在我们编程的过程中是谨记的重点,所以对其有深刻了解是必须的.   < Clean Code(代码整洁之道)>作者Robert C. Mar ...

  3. UML uml基础知识

    uml基础知识 一.了解: uml是Unified Modeling Language的缩写,意思是统一建模语言或标准建模语言. UML规范用来描述建模的概念有,类(对象的).对象.关联.职责.行为. ...

  4. 贝塞尔曲线 WPF MVVM N阶实现 公式详解+源代码下载

    源代码下载 效果图: 本程序主要实现: N阶贝塞尔曲线(通用公式) 本程序主要使用技术 MVVM InterAction 事件绑定 动态添加Canvas的Item 第一部分公式: n=有效坐标点数量 ...

  5. OpenGL学习脚印:背面剔除(Face Culling)

    写在前面 在绘制封闭类型的几何对象时,开启背面剔除功能能够提高渲染性能.本节简要介绍下背面剔除,示例程序可以在我的github下载. 什么是背面剔除 当我们观察场景中对象时,一般只能以一定角度来观察, ...

  6. [Objective-C语言教程]常量（7）

    常量指的是程序在执行期间不会改变的固定值.这些固定值也称为文字.常量可以是任何基本数据类型,如整数常量,浮点常量,字符常量或字符串文字.还有枚举常量.常量被视为常规变量,只不过它们的值在定义后无法修改 ...

  7. 浅谈Ionic2

    http://www.cnblogs.com/zhouming-web/p/6226323.html 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScrip ...

  8. gitlab容器--带https配置

    #2.gitlab 重要目录 /home/maks/gitlab/config /etc/gitlab /home/maks/gitlab/logs /var/log/gitlab /home/mak ...

  9. JQ的ready()方法与window.onload()的区别与联系

    JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系:   $(document).ready() windo ...

  10. oracle安装注意

    安装环境:widows7相关教程:https://jingyan.baidu.com/article/4d58d5411e16de9dd4e9c0ec.html oracle安装情况:标准版2.8Go ...