今天刚看了篇文章《纯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. cenos7切换阿里源

    备份并安装base reop源 cd /etc/yum.repos.d sudo mv CentOS-Base.repo CentOS-Base.repo.bak 下载阿里源并配置 sudo wget ...

  2. webUploader 的使用

    地址:http://fex.baidu.com/webuploader/demo.html 这个主要是扒的demo 引用<link href="~/Scripts/webuploade ...

  3. selenium爬取网易云

    from selenium import webdriver from selenium.webdriver import ActionChains from selenium.webdriver.c ...

  4. docker swarm 命令

    初始化swarm manager并制定网卡地址 docker swarm init --advertise-addr 192.168.10.117 强制删除集群,如果是manager,需要加–forc ...

  5. Centos 固定ip

    vim /etc/sysconfig/network-scripts/ifcfg-eth0 BOOTPROTO="static" ONBOOT=yes IPADDR=192.168 ...

  6. WPF 实现INotifyPropertyChanged .Net Framework 4.5

    自己动手写了一个基类来实现INotifyPropertyChanged接口,以后可以直接使用. using System.ComponentModel; using System.Runtime.Co ...

  7. OCP 12c最新考试原题及答案（071-3）

    3.(4-10) choose the best answer:The user SCOTT who is the owner of ORDERS and ORDER_ITEMS tables iss ...

  8. OCP换考题了，052新考题及答案整理-第17题

    17.Which two statements are true about tablespaces? A) A database can contain multiple undo tablespa ...

  9. [agc016b]Colorful Hats 分类讨论

    Description ​ 有n个人,每个人都戴着一顶帽子.当然,帽子有不同的颜色. ​ 现在,每个人都告诉你,他看到的所有其他人的帽子共有多少种颜色,请问你有没有符合所有人的描述的情况. Input ...

  10. IO多路复用，协程，

    一.单线程的并发 import socket import select client1 = socket.socket() client1.setblocking(False) # 百度创建连接: ...