<legend id='RbJ3i'><style id='RbJ3i'><dir id='RbJ3i'><q id='RbJ3i'></q></dir></style></legend>

        • <bdo id='RbJ3i'></bdo><ul id='RbJ3i'></ul>
        <tfoot id='RbJ3i'></tfoot>
      1. <i id='RbJ3i'><tr id='RbJ3i'><dt id='RbJ3i'><q id='RbJ3i'><span id='RbJ3i'><b id='RbJ3i'><form id='RbJ3i'><ins id='RbJ3i'></ins><ul id='RbJ3i'></ul><sub id='RbJ3i'></sub></form><legend id='RbJ3i'></legend><bdo id='RbJ3i'><pre id='RbJ3i'><center id='RbJ3i'></center></pre></bdo></b><th id='RbJ3i'></th></span></q></dt></tr></i><div id='RbJ3i'><tfoot id='RbJ3i'></tfoot><dl id='RbJ3i'><fieldset id='RbJ3i'></fieldset></dl></div>

        <small id='RbJ3i'></small><noframes id='RbJ3i'>

      2. 动画边框底部的长度

        时间:2023-11-01

              <legend id='0NFlv'><style id='0NFlv'><dir id='0NFlv'><q id='0NFlv'></q></dir></style></legend>

              <tfoot id='0NFlv'></tfoot>
              • <bdo id='0NFlv'></bdo><ul id='0NFlv'></ul>
                <i id='0NFlv'><tr id='0NFlv'><dt id='0NFlv'><q id='0NFlv'><span id='0NFlv'><b id='0NFlv'><form id='0NFlv'><ins id='0NFlv'></ins><ul id='0NFlv'></ul><sub id='0NFlv'></sub></form><legend id='0NFlv'></legend><bdo id='0NFlv'><pre id='0NFlv'><center id='0NFlv'></center></pre></bdo></b><th id='0NFlv'></th></span></q></dt></tr></i><div id='0NFlv'><tfoot id='0NFlv'></tfoot><dl id='0NFlv'><fieldset id='0NFlv'></fieldset></dl></div>

                1. <small id='0NFlv'></small><noframes id='0NFlv'>

                    <tbody id='0NFlv'></tbody>
                2. 本文介绍了动画边框底部的长度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  我有一个导航栏.在悬停任何菜单项时,我希望获得与 here(查看左上角的边框或菜单项在悬停时的动画效果.)

                  I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)

                  我试图在 stackoverflow 和谷歌上找到类似的问题,但我没有发现任何有用的东西.

                  I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.

                  非常感谢任何帮助.

                  推荐答案

                  嗯,这就像使用开发人员工具检查 Web 一样简单.他们在该页面中所做的是使用 :before 伪元素在菜单内创建一个元素.在悬停时,他们使用 CSS 变换(缩放)来改变长度.

                  Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.

                  jsfiddle.

                  span
                  {
                      display: inline-block;
                      padding: 6px 0px 4px;
                      margin: 0px 8px 0px;
                      position: relative;
                  }
                  
                  span:before
                  {
                      content: '';
                      position: absolute;
                      width: 100%;
                      height: 0px;
                      border-bottom: 1px solid black;
                      bottom: 2px;
                      -webkit-transform: scaleX(0);
                      -ms-transform: scaleX(0);
                      transform: scaleX(0);
                      -webkit-transition: -webkit-transform 0.2s ease-in;
                      transition: transform 0.2s ease-in;
                  }
                  
                  span:hover:before
                  {
                      -webkit-transform: scaleX(1);
                      -ms-transform: scaleX(1);
                      transform: scaleX(1);
                  }
                  

                  这篇关于动画边框底部的长度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:Selenium 和 :hover css 下一篇:检查 Chrome 中的悬停元素?

                  相关文章

                  <i id='Tqtgg'><tr id='Tqtgg'><dt id='Tqtgg'><q id='Tqtgg'><span id='Tqtgg'><b id='Tqtgg'><form id='Tqtgg'><ins id='Tqtgg'></ins><ul id='Tqtgg'></ul><sub id='Tqtgg'></sub></form><legend id='Tqtgg'></legend><bdo id='Tqtgg'><pre id='Tqtgg'><center id='Tqtgg'></center></pre></bdo></b><th id='Tqtgg'></th></span></q></dt></tr></i><div id='Tqtgg'><tfoot id='Tqtgg'></tfoot><dl id='Tqtgg'><fieldset id='Tqtgg'></fieldset></dl></div>

                    • <bdo id='Tqtgg'></bdo><ul id='Tqtgg'></ul>
                  1. <tfoot id='Tqtgg'></tfoot>
                      <legend id='Tqtgg'><style id='Tqtgg'><dir id='Tqtgg'><q id='Tqtgg'></q></dir></style></legend>

                      <small id='Tqtgg'></small><noframes id='Tqtgg'>