CSS3+ベジェ曲線でスケーラブルな入力検索ボックス効果を実現

では、早速レンダリングを見てみましょう。

コアコードはtransition: cubic-bezier(0.68, -0.55, 0.27, 1.55) すべて 1 です。transition属性の cubic-bezier (ベッセル曲線) を通じて、トランジション効果にバッファ効果が追加されます。 HTML コードのメインモジュールは、入力と親 div です。div の幅は入力の幅よりも大きくする必要があります。cubic-bezier がなくても、この効果は実現できます。 transition: all 1s;

トランジション効果にはバッファ効果がありません。ここで使用するモーションカーブは

最後に、完全なコード

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="utf-8">
        <スタイル タイプ="text/css">
            .検索ラップ{
                マージン: 0 自動;
                幅: 200ピクセル;
                高さ: 200px;
            }
            。検索{
                幅: 50px;
                高さ: 30px;
                マージン: 20px 10px 0 0;
                境界線: 1px 実線 #4000FF !重要;
                パディング: 0 10px;
                フロート: 右;
                境界線の半径: 5px;
                色: #fff;
                遷移: すべて 1;
                不透明度: .5;
            }
            .検索:フォーカス{
                幅: 100%;
                アウトライン:なし;
            }
        </スタイル>
    </head>
    <本文>
        <div class="search-wrap">
            <input type="text" name="" class="search">
        </div>
    </本文>
</html>

CSS3+ベジェ曲線を使用して格納式入力検索ボックス効果を実現する方法についての記事はこれで終わりです。CSS3ベジェ曲線格納式入力検索ボックスの関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

<<: MySQL マスタースレーブ同期の原理と応用

>>: Prometheus+Grafanaによるnginxの監視方法を分析する