1

wallbase.ccのソースを調べて、ホームページにあるような入力ボックスのスタイルを設定する方法を見つけようとしています。主に、すばやく点滅するカーソルと、アニメーションのように見えるテキストに注目しています。

4

3 に答える 3

2

彼らはテキスト入力をまったくスタイリングしていません。代わりに、テキスト入力を使用して、アニメーション化された DOM 要素をレンダリングする JavaScript をトリガーしています。このレベルのカスタマイズは、CSS だけでは実行できません。

少し入力して DOM を調べると、これらの要素がテキスト入力の兄弟ノードとして表示されます。

<div>
    <span>t</span>
    <span>e</span>
    <span>s</span>
    <span>t</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>&nbsp;</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <b class="caret" style="height: 25px;">​&lt;/b>
</div>

文字を入力または削除すると、javascript は各文字を新しい<span>要素として追加または削除<b class="caret">し、アニメーションの点滅カーソルである要素を最後に配置します。

各文字はキャレットと同様に固有の要素ではなく、CSS トランジションでアニメーション化できます。トランジションは、サイズや不透明度などのアニメーションを可能にします。これはまさにトランジションが行っていることです。

于 2013-09-06T00:42:03.287 に答える
1

キャレットはアニメーションを使用しています。いくつかの継承されたスタイルに加えて、次の 2 つの主要なクラスがあります (ホバー状態):

.searchmainbar .maininput:focus ~ div .caret {
    opacity: .8;
    box-shadow: 0 0 8px #fff;
    -webkit-animation: 0.4s 40ms caret infinite;
    animation: 0.4s 40ms caret infinite;
}

.searchmainbar .maininput:focus ~ div .caret {
    opacity: .8;
    box-shadow: 0 0 8px #fff;
    -webkit-animation: 0.4s 40ms caret infinite;
    animation: 0.4s 40ms caret infinite;
}

/* Character animation */
.fancyInput>div span {
    -webkit-transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
    transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
    display: inline-block;
    position: relative;
}

@keyframes caret{50%{opacity:0.1;transform:scaleY(0.8)}}

<div><span>H</span><b class="caret" style="height: 25px;">&#8203​&lt;/b></div>

クロムでそれを見つける簡単な方法は、インスペクターで要素を右クリックし、要素を強制的に:focus状態にすることです。

于 2013-09-06T00:43:21.433 に答える