6

ホバーすると上部に境界線が表示されるように、リンクのスタイルを設定しました。境界線をホバーすると、トランジションとともに消えます。境界線の上にカーソルを置いてオフにすると、境界線がフェードインするのではなく、スライドインします。境界線をスライドではなくフェードインさせたい。これどうやってするの？ここにJsFiddleがあります

HTML

<div>Text</div>

CSS

div {
    line-height: 50px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: border .2s ease-in-out;
    -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
}

div:hover {
    border-top: 3px solid #000;
}

html, body {
    margin: 0;
    padding: 0;
}
4

2 に答える 2

20

色をアニメーション化する場合は、境界線全体ではなく、色をアニメーション化します。また、0 ピクセルから 3 ピクセルまでアニメーション化するので、もちろんスライド インします。代わりに、デフォルトの透明な境界線を指定する必要があります。

div {
    line-height: 50px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: border-color .5s ease-in-out;
    border-top: 3px solid transparent;
}

div:hover {
    border-top-color: #000;
}

Sample on JSfiddle

補足として、-moz-transitionFF17 かそこらで Mozilla がプレフィックスなしの CSS Transitions モジュールをサポートしているため、現在は廃止されています。

2014 年 12 月の更新: この回答がまだ表示され、頻繁に支持されていることに気付いたので、現在または最近置き換えられたブラウザーtransitionではプレフィックスが付けられなくなったことに注意してください。

于 2013-05-30T23:48:50.040 に答える