边框传输动画始终可见答案

【问题标题】：Borders transfer animation with being visible all the time边框传输动画始终可见
【发布时间】：2021-02-24 03:40:12
【问题描述】：

我一直想知道如何实现将边框（或框阴影）动画从一个元素转移到另一个元素。这是原始示例，

    .item {
      float: left;
      width: 33.33%;
      padding: 0;
      text-align: center;
    }
    .item:hover {
      box-shadow: 0 0 0 3px black;
      /* border: 3px solid black; */
    }
    .sections {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
    ul {
      list-style-type: none;
    }
    a:hover {
      text-decoration: none;
    }
    a {
      text-decoration: none;
    }

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
      </head>
      <body>
        <div class="sections">
          <ul>
            <li class="item"><a href="#">Element 1</a>
            </li>
            <li class="item"><a href="#">Element 2</a>
            </li>
            <li class="item"><a href="#">Element 3</a>
            </li>
          </ul>
        </div>
      </body>
    </html>

在这种情况下，“边界”是box-shadow 或.item:hover 类中的border。如您所见，边框在悬停事件时出现并销毁，但我需要边框从一个li 元素流向另一个li 元素而不破坏，始终保持可见。我发誓我在几个网站上都看到过这样的东西，你能在 javascript 的帮助下推荐一些关于这个的东西吗？

【问题讨论】：

标签： html css animation css-transitions

【解决方案1】：

也许这可以帮助你
我从 Codepen 得到的，这不是我的代码

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 25%;
}

.three:hover ~ hr {
  margin-left: 50%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

<div class="container">
  <ul>
    <li class="one"><a href="#">Uno</a></li><!--
 --><li class="two"><a href="#">Dos</a></li><!--
 --><li class="three"><a href="#">Tres</a></li><!--
 --><li class="four"><a href="#">Quatro</a></li>
    <hr />
  </ul>
</div>

来源：https://codepen.io/rm/pen/ldhon

【讨论】：

这是一个不错的简单方法，让我想到了使用列表中的最后一个元素，谢谢。我们可以通过在列表中的最后一个元素上使用伪元素来简化它（在不需要在 HTML 中添加另一个元素的意义上），并在 li 元素悬停时格式化。

【解决方案2】：

希望对你有用

html {
  font-family: 'Josefin Slab', 'Comfortaa', sans-serif;
  font-size: 1.2em;
  background: #eee;
}

ul {
  position: relative;
  width: 27em;
  height: 2em;
  margin: 100px auto;
  padding: 0;
  white-space: nowrap;
}

ul li {
  display: inline;
  text-align: center;
}

ul li a {
  position: relative;
  top: 0;
  left: 0;
  right: 25em;
  bottom: 0;
  display: inline-block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .4em .2em;
  color: #222;
  text-decoration: none;
  text-shadow: 0 1px 0 white;

  /*transition*/
  -webkit-transition: width .3s,right .3s;
  -moz-transition: width .3s,right .3s;
  -o-transition: width .3s,right .3s;
  transition: width .3s,right .3s;
}

ul li:nth-child(1) a { width: 4em; }
ul li:nth-child(2) a { width: 4em; }
ul li:nth-child(3) a { width: 4em; }
ul li:nth-child(4) a { width: 12em; }
ul li:nth-child(5) a { width: 5em; }

ul li:last-child a::after {
    content: "";
    position: absolute;
    right: inherit;
    bottom: -3px;
    width: inherit;
    height: 38px;
    background: #ccc;
    pointer-events: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    border: 1px solid transparent;
    background: transparent;
}

ul li:nth-child(1) ~ li:last-child a {
  right: 25em;
  width: 4em;
}

ul li:nth-child(2):hover ~ li:last-child a {
  right: 21em;
  width: 4em;
}

ul li:nth-child(3):hover ~ li:last-child a {
  right: 17em;
  width: 4em;
}

ul li:nth-child(4):hover ~ li:last-child a {
  right: 5em;
  width: 12em;
}

ul li:nth-child(5):last-child:hover a {
  right: 0;
  width: 5em;
}

ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after { border-color: red; }

ul li:last-child a {
  min-width: 5em;
  max-width: 5em;
}

ul li a:hover,
ul li a:focus {
  color: red;
  /*transition*/
  -webkit-transition: width .3s,right .3s,background-color .3s;
  -moz-transition: width .3s,right .3s,background-color .3s;
  -o-transition: width .3s,right .3s,background-color .3s;
  transition: width .3s,right .3s,background-color .3s;
}

ul li a:focus { border-bottom: 3px solid #c351fa; }

<ul>
   <li><a href="#">Home </a></li><!--
--><li><a href="#"> Lorem </a></li><!--
--><li><a href="#"> Ipsum </a></li><!--
--><li><a href="#"> Lorem dummy text</a></li><!--
--><li><a href="#"> Sit amet </a></li>
 </ul>

【讨论】：

【解决方案3】：

我们可以在最后一个 li a 元素上使用伪元素来显示边框，因为 CSS 允许我们在列表中的任何元素悬停时选择最后一个兄弟元素。

然后我们可以设置边框颜色，设置这个伪元素的正确位置，让它过渡到悬停的li元素位置。

可以有一个相当通用的解决方案 - 将 CSS 变量设置为列表中元素的数量（如果需要，还可以设置转换时间），并且（几乎）其他所有内容都使用 CSS calc。

然而，不幸的是，虽然 CSS 在理论上可以让你使用 n 值（在 nth-child(n) 中），但目前这似乎只适用于伪元素内容，所以我们不能用它来进行计算。

因此，我在 CSS 中放入了一组第 n 个子设置 - 目前有 6 个，因此您可以拥有最多 6 个的列表，而无需更改任何内容，除了 --n。如果您想要更多，请添加更多。

这是sn-p。

.sections ul {
  --n: 3; /* the number of items in the list */
  --t: 1s; /* the time taken to move to the new hover position */
  --w: calc(100% / var(--n)); 
  box-sizing: border-box;
  padding: 20px 0;
  margin: 0;
}

/* below is the original CSS */
    .item {
      float: left;
      width: var(--w);
      padding: 0;
      text-align: center;
    }
    .item a {
      text-align: center;
    }
    
    .sections {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
    ul {
      list-style-type: none;
    }
    a:hover {
      text-decoration: none;
    }
    a {
      text-decoration: none;
    }
/* end of the original CSS */

ul li:last-child a::after {
    position: absolute;
    content: '';
    right: inherit;
    width: var(--w);
    height:1.5em;
    transform: translateY(-0.3em);
    pointer-events: none;
    transition: right var(--t) ease;
}

ul li:nth-child(1):hover ~ li:last-child a {
  right: calc(var(--w) * calc(var(--n) - 1));
}

ul li:nth-child(2):hover ~ li:last-child a { /*when you hover on the second element it changes the last element's a width and its position */
   right: calc(var(--w) * calc(var(--n) - 2));
}

ul li:nth-child(3):hover a {
  right: calc(var(--w) * calc(var(--n) - 3));
}

ul li:nth-child(4):hover a {
  right: calc(var(--w) * calc(var(--n) - 4));
}

ul li:nth-child(5):hover a {
  right: calc(var(--w) * calc(var(--n) - 5));
}

ul li:nth-child(6):hover a {
  right: calc(var(--w) * calc(var(--n) - 6));
}

ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after {
  border: 2px solid black;
}

ul li a {
  width: 100%;
}

        <div class="sections">
          <ul>
            <li class="item"><a href="#">Element 1</a>
            </li>
            <li class="item"><a href="#">Element 2</a>
            </li>
            <li class="item"><a href="#">Element 3</a>
            </li>
          </ul>
        </div>

【讨论】：