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 ...
随机推荐
- SpringCloud教程 | 第七篇: 高可用的分布式配置中心(Spring Cloud Config)(Finchley版本)
上一篇文章讲述了一个服务如何从配置中心读取文件,配置中心如何从远程git读取配置文件,当服务实例很多时,都从配置中心读取文件,这时可以考虑将配置中心做成一个微服务,将其集群化,从而达到高可用,架构图如 ...
- Verilog MIPS32 CPU（六）-- MDU
Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...
- Java 中使用MD5方法加密密码
prequisites 导入包 import java.security.MessageDigest;
- First App on Phonegap | Cordova
Phonegap简介 PhoneGap是一能够让你用普通的web技术编写出能够轻松调用api接口和进入应用商店的 html5应用开发平台,是唯一支持7个平台的开源移动框架. 优势: 1.兼容性:多平台 ...
- hello world! hello blog!
2015年12月21日 16:42:15 博客开启!
- 解除SVN的控制
win10操作就是把文件夹隐藏的对勾勾上 然后就可以看见一个.SVN的文件夹 把他直接删除即可 然后刷新 自己亲测的 win10 家庭版
- RabbitMQ与.net core(四) 消息的优先级 与 死信队列
1.消息的优先级 假如现在有个需求,我们需要让一些优先级最高的通知推送到客户端,我们可以使用redis的sortedset,也可以使用我们今天要说的rabbit的消息优先级属性 Producer代码 ...
- OOM AutoMapper的简单实用
OOM AutoMapper的简单实用 一.前言: OOM顾名思义,Object-Object-Mapping实体间相互转换,AutoMapper也是个老生常谈了,其意义在于帮助你无需手动的转换简单 ...
- Linux Shell 编程学习笔记
1:Shell Script中if语句的条件部分要以分号来分隔 2:要注意条件测试部分中的空格.在方括号的两侧都有空格 3:echo "Hi, ${a}s" 单引号中的变量不会进行 ...
- leetcode-575-Distribute Candies（计算一个数组中元素的种类的快速方法）
题目描述: Given an integer array with even length, where different numbers in this array represent diffe ...