189 8069 5689

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

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

创新互联公司是少有的网站设计、成都做网站、营销型企业网站、成都微信小程序、手机APP,开发、制作、设计、卖友情链接、推广优化一站式服务网络公司,自2013年起,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评

CSS实现的outline动画

gif截图走起~~~~~

首先是Chrome浏览器下:
如何使用CSS实现outline切换的动画效果

然后是FireFox浏览器下:
如何使用CSS实现outline切换的动画效果

您可以狠狠地点击这里:使用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切换的动画效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站名称:如何使用CSS实现outline切换的动画效果
文章来源:http://cdxtjz.cn/article/igecgg.html

其他资讯