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 の一般的なタグ

推薦する

RGBA の「a」は何を意味するのでしょうか? CSS RGBA カラー ガイド

RGBAは色の値と透明度を設定できるCSSカラーです以下は、rgba() を使用して白色を 50% ...

Vue 関数のアンチシェイクとスロットリングの正しい使用方法

序文1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されま...

MySQL ステートメントにおける IN と Exists の比較分析

背景最近、SQL 文を書くときに、IN と Exists のどちらを選択するか迷ったので、両方の方法...

Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...

Vue3における7種類のコンポーネント通信の詳細

目次1. Vue3コンポーネント通信方式2. Vue3通信の使い方2.1 小道具2.2 $エミット2...

MySQL で数千万のテストデータを含むテストデータベースを作成する方法

場合によっては、MySQL が公式に提供しているテスト ライブラリに基づいてテスト データを作成し、...

ウェブページからテキスト透かしを削除する2つの簡単な方法

<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...

Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...

実用的な情報が満載のJavaScript Webフォーム機能通信

1. はじめに先ほど、フロントエンドの表示の問題について説明しました。では、前のコンテンツに戻って、...

Docker で MySQL をデプロイする詳細なプロセス (Docker でデプロイされる一般的なアプリケーション)

以前にも紹介しました: docker (一般的なアプリケーションのデプロイ): docker dep...

Vueはスクロールバースタイルを実装します

最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...

Linux で大きなファイルの内容を消去または削除する 5 つの方法

Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...

重複データの処理に関するMySQL学習ノート

MySQLは重複データを処理します一部の MySQL テーブルには重複レコードが含まれている場合があ...

HTMLボタンを中央に配置する方法

HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...