今天刚看了篇文章《纯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/
时间： 2024-10-22 23:34:47