数年前、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 をよろしくお願いいたします。 |
Ubuntu 18.04、その他のバージョンのUbuntu質問: sudo apt-get ins...
RGBAは色の値と透明度を設定できるCSSカラーです以下は、rgba() を使用して白色を 50% ...
序文1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されま...
背景最近、SQL 文を書くときに、IN と Exists のどちらを選択するか迷ったので、両方の方法...
目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...
目次1. Vue3コンポーネント通信方式2. Vue3通信の使い方2.1 小道具2.2 $エミット2...
場合によっては、MySQL が公式に提供しているテスト ライブラリに基づいてテスト データを作成し、...
<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...
1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...
1. はじめに先ほど、フロントエンドの表示の問題について説明しました。では、前のコンテンツに戻って、...
以前にも紹介しました: docker (一般的なアプリケーションのデプロイ): docker dep...
最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...
Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...
MySQLは重複データを処理します一部の MySQL テーブルには重複レコードが含まれている場合があ...
HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...