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

夏天,一束束剑麻,开出的花,如一串串玲珑的 "铃铛 ",在陽光下争艳斗丽地开放。花期最长的要数百日红了,它在烈日下顽强地开出硕大的、玖瑰红的花朵。每天早晨,树下的石凳上,都坐满了晨读的大哥哥大姐姐,这也成了校园的一处风景。

我记得有个版本的迅雷软件,会发现focus文本框时候,其外发光的外挂会跟着动画移动。据说这一系列N动画交互引擎的维护成本还是挺高的。

今天,偶然看到一个名叫Nikita Vasilyev的兄弟在web页面上折腾了个类似效果,您有兴趣可以点击这里瞅瞅。Github地址为:https://github.com/NV/flying-focus/

焦点飞来飞去~

使用很简单,只要在页面上加载了下面这个JS: flying-focus.js 就可以实现Tab切换焦点框的时候,焦点框是飞过去的~~

看上去很酷。

不过,对于实际的对外项目而言,价值并不大。首先是兼容性,其次是JS依赖,再者是全局处理(影响页面所有元素)。由于借助pointer-events:none,只有Chrome以及Safari支持。不过,在一些特殊或重要的表单上使用这种增强的交互可能会有出彩的效果。也就是只适合局部使用。或者在个人网站上用用。对于大多数内网项目,华而不实的效果没有任何意义。

但是,作者的想法与创意是相当好的。于是,我们可以再其创造性的idea上揉进自己的技术,折腾出其他些东西。

例如,我就有个蛋疼的想法:“哈,使用纯CSS可不可以实现类似效果呢?”

一顿啪啪啪,哟,有个略有模样的demo还真出来了。再次卖弄下。
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:5pxauto-webkit-focus-ring-color;
  7. //IE10+,FireFox浏览器下蓝色的蓝色框框效果(模拟Safari)
  8. box-shadow:002px3px#78aeda,002px#78aedainset;
  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切换的动画效果就介绍到这了。今天多一份拼搏、 明天多几份欢笑。更多相关如何使用CSS如何实现outline切换的动画效果内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例