Question

我使用CSS3过渡来在链接上进行一些淡入/淡出过渡。

我已经使用过渡使背景颜色渐渐消失，但我想制作两个＆＃34;边界＆＃34;淡入并向下移动。边框实际上不是边框，因为我不能使用它来正确定位它，因此我使用了a：之前的伪元素：高度为3px来创建边框效果。

我的问题是，是否可以使用CSS3过渡（例如淡入颜色或将边框向下移动3px）

li:hover:before{content: "";height: 3px;background-color: black;width: 100%;position: absolute;left: 0;top: -3px;}
li:hover:after{content: "";height: 3px;background-color: black;width: 100%;position: absolute;left: 0;bottom: -3px;}

http://jsfiddle.net/akxrv4zf/1/

Answer 1

您只需要设置:after和:before psuedo元素的样式而不用:hover psuedo事件。

您需要以下样式：li:before和样式：li:hover:before。尝试类似下面的内容。

/* Menu link animations */

li {
  transition: background-color 0.3s ease-in;
  position: relative;
}
li:hover {
  background-color: transparent;
}
li:before {
  content: "";
  height: 3px;
  background-color: transparent;
  width: 100%;
  position: absolute;
  left: 0;
  top: -10px;
  transition: background 0.5s, top 0.5s;
}
li:after {
  content: "";
  height: 3px;
  background-color: transparent;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -10px;
  transition: background 0.5s, bottom 0.5s;
}
li:hover:before {
  content: "";
  height: 3px;
  background-color: black;
  width: 100%;
  position: absolute;
  left: 0;
  top: -3px;
}
li:hover:after {
  content: "";
  height: 3px;
  background-color: black;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -3px;
}
/* General Link settings */

li {
  cursor: pointer;
  margin: 25px 2% 0 2%;
  display: inline-block;
  width: 15%;
  text-align: center;
  padding: 5px;
  background-color: #E7DAC6;

<li>Example</li>

Answer 2

是的，您可以设置:after和:before元素，就像任何其他元素一样，包括转换。

结帐jsFiddle.

Answer 3

您必须为:after，:before元素添加内容，以便您可以从一个州动画到另一个州。

如果他们从一开始就没有内容，则会将其视为display:none，并且您无法将转场应用于状态从display:none开始的元素

li:before, li:after {
    content:"";
    height: 3px;
    background-color: transparent;
    width: 100%;
    position: absolute;
    left: 0;
    transition:all 0.3s ease-in;
}
li:before {top: 0px;}
li:after {bottom: 0px;}

li:hover:before {top: -3px;}
li:hover:after {bottom: -3px;}
li:hover:after, li:hover:before {
    background-color:black;
}

http://jsfiddle.net/gaby/vmL8qt6k/1

演示

在a：before或：after元素上创建转换

3 个答案: