css3中outline切换动画效果
今天刚看了篇文章《纯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切换动画效果的更多相关文章
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...
- react实现页面切换动画效果
一.前情概要 注:(我使用的路由是react-router4) 如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升: but the 问题是 ...
- css3中的制作动画小总结
系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
随机推荐
- python读取pop3服务器邮件并且下载
# -*- coding: cp936 -*- import poplib import random import os def getmail(): # 蒋辉文拥有该程序权利 你可以随意使用 em ...
- Java NIO学习-详细内容（三）
九.nio.file 该包是1.7新出的,包含了一系列高级的文件和目录操作方法 1.控制目录属性,只读,系统之类的 2.监控文件及文件夹的改变的WatchService public void sta ...
- GetFileVersionInfoSize函数确定操作系统是否可以检索指定文件的版本信息
GetFileVersionInfoSize函数 -------------------------------------------------- ------------------------ ...
- Android 画指南针
1.无意看到了一个指南针的UI,在这里简单的模仿了一下.其实就是第画布的一些变化而已. 别人的效果图是: 3.简单说一下思路: 1)首先是画一个黑色圆盘 2) 然后画圆盘上的刻度(就是对Canvas一 ...
- jquery库与其他库冲突的问题解决-jquery.noConflict()
在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突:若是发生冲突后,可以通过以下几种方案进行解决: 一. jQuery库在其他库之前导入,直接 ...
- MacOS安装使用Node.js
1. 到官网https://nodejs.org/zh-cn/download/下载,选择Macintosh Installer, 如下: 2. 按预设的下一步,Node.js版本为v6.10.0, ...
- Re：从零开始的Spring Security Oauth2（二）
本文开始从源码的层面,讲解一些Spring Security Oauth2的认证流程.本文较长,适合在空余时间段观看.且涉及了较多的源码,非关键性代码以…代替. 准备工作 首先开启debug信息: l ...
- NuGet文件下载与应用
nuget是一款.net下强大的包管理开发工具,Visual Studio 2013和Visual Studio 2015都缺省支持Nuget.在线开发能享受到Nuget的便利,但是如果是离线开发,还 ...
- Flex + Bison: Scanning from memory buffer
Found from StackOverflow: ========================================================================== ...
- Windows上编译libpng
下载libpng 1.5.10并解压到[工作目录]/png/libpng-1.5.10 用CMake选择png/libpng-1.5.10目录并Configure: CMAKE_C_FLAGS_DEB ...