0

ブートストラップ入力に似たものを作成しようとしています。ユーザーが入力をクリックすると、素敵なトランジションとグローが再生されます。私はすべてのスタイルを落としましたが、トランジションは奇妙に見えますが、他のすべてのサイトはそれを正しくアニメーション化します. 私のボックスの影は非常に速く表示されてから暗くなりますが、このリンクではすべてが正常に機能していますが、http://67.184.73.19/Website/Login/この前のリンクとは異なる方法でアニメーション化しています。以下にいくつかのコードがあります。

CSS入力

.Field {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
min-height:34px;
padding:7px 8px;
outline:none;
color:#333;
background-color:#fff;
background-repeat:no-repeat;
background-position:right center;
border:1px solid #ccc;
border-radius:3px;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.075);
-moz-box-sizing:border-box;
box-sizing:border-box;
vertical-align:middle;  
}

.Field:focus {
box-shadow:0 0 10px rgba(0,153,255,.75);
border:1px solid #09F;
}

ちなみにGoogle Chromeは最新版を使っています。

4

1 に答える 1

3

これは、元のボックス シャドウが挿入されていることと関係があります。ブラウザは、インセットと非インセットのボックス シャドウの間の移行に問題があるようで、試行しません。ただし、簡単な修正方法があります。元のボックス シャドウを元のスタイルに戻して追加します。

.Field:focus {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075), 0 0 10px rgba(0,153,255,.75);
    border: 1px solid #09F;
}

これにより、既にそこにあるボックス シャドウ (フォーカス ボックス シャドウで上書き/置換されていた) が保持され、新しいボックス シャドウがフォーカス時に追加されます。これは、ボックスをクリックすると正しくフェードインおよびフェードアウトします。

于 2013-03-21T00:58:52.450 に答える