时间:2021-05-08
我记得有个版本的迅雷软件,会发现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复制内容到剪贴板form *:focus ~ .focus-trans { transition: all .15s;}
哈哈,应该不难理解。
~选择器表示相邻的兄弟元素。于是,我们就可以控制外发光的框框了,例如:
看上去效果还不错。
实际上,还是有诸多限制的。首先,表单元素必须相邻,否则无法控制同一个元素,也就无法实现连续的动画;其次,每个控件的outline位置以及大小都是要冲定义的,实现的工时成本比较高,只能在局部重用位置使用。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
html结构XML/HTMLCode复制内容到剪贴板css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现。CS
首先来看一看我之前写的一个CSS轮播动画效果,为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的
css导航切换效果图如下:代码如下,复制即可使用:css实现导航切换.clothes{width:1170px;margin:0auto;border-bott
本文实例为大家分享了JavaScript实现弹窗效果的具体代码,供大家参考,具体内容如下使用css动画效果实现弹窗缓慢弹出和收回。使用JavaScript实现定
前面学习了用css实现动画效果,那Vue中能不能用js实现动画效果呢?其实Vue提供了很多动画钩子enter入场动画钩子函数有before-enter、ente