0

私のテキストの下の行を自動的にすべての人にアルギンする方法を知っている人はいますか? ここに私のアニメーションがあります

<div class="line"><div>behance.net</div>
</div>
<br>
<div class="line"><div>google.pl</div>
</div>
<br>
<div class="line"><div>twitter.com</div>
</div></br>

CSS

.line{
    font-family:Tahoma;
    width:0px;
    position: absolute;
    background:black;
    transition:width 0.4s ease ;
}

div:hover{
    position: absolute;
    width:86px;
}
.line div{
    background:#fff;
    position:relative;
    bottom:1px;
}

最初の例では、すべてが正常に機能し、線の幅は問題ありませんが、他の例では問題ありません。

4

2 に答える 2

2

これを試すことができます -デモ

HTML

<div class="line">behance.net <span></span></div> <br />
<div class="line">google.pl <span></span></div> <br />
<div class="line">twitter.com <span></span></div> <br />

CSS

.line {
    font: 400 1em Tahoma;
    margin: 5px;
    display: inline-block;
    overflow: hidden;
    padding: 2px 0;
    position: relative;
}

.line span {
    display: block;
    position: absolute;
    left: -90px;
    bottom: 1px;
    height: 1px;
    width: 100%;
    background: #c00;
    -webkit-transition: all .4s;
}

.line:hover span {
    left: 0;
}
于 2013-03-22T19:05:30.083 に答える
1

マークアップの少ない別のソリューション:

デモ

<div class='line'>behance.net</div><br>
<div class='line'>google.pl</div><br>
<div class='line'>twitter.com</div><br>

CSS:

.line {
  display: inline-block;
  position: relative;
  background-position: -85px 0;
  transition: 1s;
  cursor: pointer;
}
.line:before {
  position: absolute;
  right: 0; top: 0; bottom: 0; left: 0;
  background: linear-gradient(0deg, crimson 1px, transparent 1px) no-repeat;
  background-position: inherit;
  background-size: 100% 100%;
  color: transparent;
  content: '';
}
.line:hover { background-position: 0 0; }

注:

私のデモでは、必要に応じてプレフィックスを追加する-prefix-freeを使用しています。WebKit ブラウザーでは、トランジションとグラデーションのプレフィックスが引き続き必要です。これらは自分でコードに追加する必要があります。そのときは、接頭辞のないものを常に最後に置くことを忘れないでください!

于 2013-03-22T19:19:37.750 に答える