Question

我找到了一个动画链接下划线的代码，但我想在另一个方向上，因为我们读（从左到右）实际上是相反的。这是JSFiddle

.sliding-u-l-r-l-inverse {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.sliding-u-l-r-l-inverse:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transition: width 0s ease;
}

.sliding-u-l-r-l-inverse:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: blue;
  transition: width .8s ease;
}

.sliding-u-l-r-l-inverse:hover:before {
  width: 0%;
  background: blue;
  transition: width .8s ease;
}

.sliding-u-l-r-l-inverse:hover:after {
  width: 0%;
  background: transparent;
  transition: width 0s ease;
}

<div class="sliding-u-l-r-l-inverse">
  I want it to slide on the other direction.
</div>

Answer 1

＆＃13;

.sliding-u-l-r-l-inverse {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.sliding-u-l-r-l-inverse:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transition: width 0s ease;
}

.sliding-u-l-r-l-inverse:after {
  content: '';
  display: block;
  position: absolute;
  left: 0; /* changed from 'right' */
  bottom: 0;
  height: 3px;
  width: 100%;
  background: blue;
  transition: width .8s ease;
}

.sliding-u-l-r-l-inverse:hover:before {
  width: 0%;
  background: blue;
  transition: width .8s ease;
}

.sliding-u-l-r-l-inverse:hover:after {
  width: 0%;
  background: transparent;
  transition: width 0s ease;
}

＆＃13;

<div class="sliding-u-l-r-l-inverse">
  I want it to slide on the other direction.
</div>

＆＃13;

Answer 2

更改左右的值声明。

即。 left:0由right:0更改为pseudo selector :after，其他right:0 left:0更改为left to right。这会改变方向并使行从.sliding-u-l-r-l-inverse { display: inline-block; position: relative; padding-bottom: 3px; } .sliding-u-l-r-l-inverse:before { content: ''; display: block; position: absolute; right: 0; bottom: 0; height: 3px; width: 100%; transition: width 0s ease; } .sliding-u-l-r-l-inverse:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: blue; transition: width .8s ease; } .sliding-u-l-r-l-inverse:hover:before { width: 0%; background: blue; transition: width .8s ease; } .sliding-u-l-r-l-inverse:hover:after { width: 0%; background: transparent; transition: width 0s ease; }开始。

＆＃13;

<div class="sliding-u-l-r-l-inverse">
  I want it to slide on the other direction.
</div>

＆＃13;

$http({
    method: 'GET',
    url: '....',
    headers: {
        'Authorization': 'Bearer ' + localStorage["token"]
    }
})
.then(function (data, status, headers, config) {
     alert(JSON.stringify(data) + "Status" + status);
})
.error(function (data, status, headers, config) {
     alert(JSON.stringify(data) + "Status" + status);
});

＆＃13;

CSS下划线动画 - 阅读方向

2 个答案: