如何使用CSS实现outline切换的动画效果

这篇文章主要介绍“如何使用CSS实现outline切换的动画效果”，在日常操作中，相信很多人在如何使用CSS实现outline切换的动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用CSS实现outline切换的动画效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

CSS实现的outline动画

gif截图走起~~~~~

首先是Chrome浏览器下：

然后是FireFox浏览器下：

您可以狠狠地点击这里：使用CSS实现focus outline动画效果demo

相比JS方法，我这里的CSS只是针对demo中的表单有效果，支持的浏览器多了一类，就是IE10+.

使用了focus伪类和相邻选择器对外发光的元素进行了位置和尺寸的控制，配合transition就有了动画效果啦！

相关CSS如下：

CSS Code复制内容到剪贴板

1. .focus-trans {   

2.     // 那个移动的外发光的框框的初始位置和大小   

3.     position: absolute; left: 99px; top: -100px;   

4.     width: 100px; height: 30px;   

5.     // Chrome浏览器下使用浏览器自带的focus效果，这里的5px其实是酱油   

6.     outline: 5px auto -webkit-focus-ring-color;   

7.     // IE10+, FireFox浏览器下蓝色的蓝色框框效果（模拟Safari）   

8.     box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset;   

9.     -webkit-box-shadow: none;   

10.     border-radius: 3px;   

11.     // 为的是失去焦点时候，框框立即消失   

12.     -webkit-transition: none;   

13.     transition: none;   

14.     // Firefox有bug，所以这里补丁了下   

15.     -moz-transition: all .15s;   

16. }  

form *:focus ~ .focus-trans { transition: all .15s;}

哈哈，应该不难理解。
~选择器表示相邻的兄弟元素。于是，我们就可以控制外发光的框框了，例如：

CSS Code复制内容到剪贴板

1. .code:focus ~ .focus-trans {  width: 130px; height: 42px; left: 99px; top: 66px; }  

看上去效果还不错。

实际上，还是有诸多限制的。首先，表单元素必须相邻，否则无法控制同一个元素，也就无法实现连续的动画；其次，每个控件的outline位置以及大小都是要冲定义的，实现的工时成本比较高，只能在局部重用位置使用。

到此，关于“如何使用CSS实现outline切换的动画效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！