CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリックすると、いくつかの小さなボタンが表示され、その表示アニメーションは非常に興味深いものでした。後で、この効果は「スティッキー」効果と呼ばれていることを知りました。写真をご覧ください。

では、この効果にはどのような属性が使用されるのでしょうか?答えは、filter:blur() 属性と filter:contrast() 属性を一緒に使用するということです。

<スタイル>
    体{
        マージン: 0;
        パディング: 0;
    }
    。箱{
        位置: 相対的;
        幅: 500ピクセル;
        高さ: 500px;
        フィルター:コントラスト(20);
        /* 背景色は単色でなければなりません。そうでないと、2 つの要素の端がぼやけてしまいます */
        背景色: #fff;
    }
    .circle-big{
        位置: 絶対;
        上: 20px;
        左: 100px;
        幅: 100ピクセル;
        高さ: 100px;
        境界線の半径: 50%;
        フィルター: ぼかし(6px);
        ボックスのサイズ: 境界線ボックス;
        アニメーション: toRight 3s イーズアウト 無限;
        背景色: #333;
    }
    .circle-small{
        位置: 絶対;
        上: 35px;
        左: 220px;
        幅: 60ピクセル;
        高さ: 60px;
        境界線の半径: 50%;
        フィルター: ぼかし(6px);
        ボックスのサイズ: 境界線ボックス;
        アニメーション: toLeft 3s イーズアウト 無限;
        背景色: #FFFC00;
    }
    @keyframes を右へ{
        50%{
            左: 150px;
        }
    }
    @keyframesを左に{
        50%{
            左: 150px;
        }
    }
</スタイル>

<div class="box">
    <div class="circle-big"></div>
    <div class="circle-small"></div>
</div>

最終的な効果は以下のようになります。

CSS を使用して 2 つの要素をブレンドする効果 (粘性効果) を実現する方法については、これで終わりです。CSS を使用して 2 つの要素をブレンドする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Vue 監視プロパティと計算プロパティ

>>:  XHTML の一般的なタグ

推薦する

Linux の一般的なコマンド chmod を使用して、ファイルの権限 777 と 754 を変更します。

よく使用されるコマンドは次のとおりです。 chmod 777 文件或目錄例: chmod 777 /...

Linux で実行可能ファイルを実行するときに「そのようなファイルまたはディレクトリはありません」というプロンプトが表示される場合の解決策

最近、Linux オペレーティング システムを使用して実行可能ファイルを実行していたところ、「そのよ...

MySQL データ型の完全分析

データ型: 列に格納できるデータとそのデータが実際にどのように格納されるかを定義する基本ルール。デー...

Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...

Win2008 サーバー セキュリティ チェック手順ガイド (日常のメンテナンス手順)

ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...

複数ページ通信を実現する JavaScript の sharedWorker の詳細な例

こんなことがありました。今日はGitHubで遊んでいました。最初はログインせずにいくつかのページを閲...

IE8 互換性について: X-UA-compatible 属性の説明

問題の説明:コードをコピーコードは次のとおりです。 <meta http-equiv=&quo...

mysql replace into の使用法の詳細な説明

replace ステートメントは、一般的に insert ステートメントに似ています。ただし、テーブ...

Vue.js アプリケーションのパフォーマンス最適化分析 + ソリューション

目次1. はじめに2. Vue JS のパフォーマンス最適化が必要な理由は何ですか? 3. Vueの...

nginx でネストされた if メソッドを実装する方法

Nginx はネストされた if ステートメントをサポートしておらず、if ステートメントでの論理判...

MySQL データのバックアップと復元のサンプル コード

1. データのバックアップ1. mysqldumpコマンドを使用してバックアップするmysqldum...

Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...

プロファイルを使用して遅い SQL を分析する MySQL の詳細な説明 (グループ左結合はサブクエリよりも効率的です)

プロファイルを使用して遅いSQLを分析するMySQL の SQL パフォーマンス アナライザーの主な...

WeChatアプレットのスケルトン画面の実装例

目次スケルトンスクリーンとはアプレットでスケルトン画面を生成する方法導入方法表示と非表示ユーザーエク...