2つのボールが交差する粘着効果を実現するCSSサンプルコード

2つのボールが交差する粘着効果を実現するCSSサンプルコード

これは純粋に CSS のみを使用して作成されたエフェクトです。簡単に言うと、このエフェクトは画像処理の原理に基づいています。方法は Photoshop とほぼ同じですが、一方がレイヤーとカラーパレットを使用して作成され、もう一方が CSS を使用して作成されます (div をレイヤーとして考えてください)。

PhotoShopを使い始める

まずは Photoshop で遊んでみましょう。CSS を直接記述するよりも理解しやすいでしょう (Photoshop を持っていなくても問題ありません。手順を読めば理解できます)。まず、2 つの新しいレイヤーを追加し、1 つに小さな赤いボールを、もう 1 つに大きな黒いボールを配置します。

次に、ガウスぼかしフィルターを使用して、小さな赤いボールと大きな黒いボールをそれぞれぼかします。

次に、新しい「明るさとコントラスト」調整レイヤーを追加し、「古いバージョンを使用する」をチェックしてコントラストの値を上げると、魔法のような現象が見られます。

端がぼやけなくなるまで引っ張った後、マウスで赤いボールを動かしてみると、赤いボールと黒いボールの接合部が粘着効果の中心になることがわかります。これが私たちが作り出したい効果です。

このように、Photoshop を使って作成する方法はすでにご存知のとおりです。同様に、CSS でも同じ方法を使用しますが、レイヤーが div に置き換えられます。とても簡単です。

CSS 効果

まず、赤いボールを表すクラス redball と黒いボールを表すクラス blackball を持つ div を HTML に配置します。これらは Photoshop の 2 つのレイヤーです。次に、一番外側のレイヤーにクラス effect を持つ div を配置します。これが調整レイヤーです。完了すると、HTML コードは次のようになります。

<div class="効果">
  <div class="ブラックボール"></div>
  <div class="redball"></div>
</div>

blackball と redball にぼかしフィルターを追加し、effect にコントラストフィルターを追加すれば、Photoshop で特殊効果を実現できます。ぼかしフィルターには filter:blur (数値) を使用し、コントラストには filter:contrast (数値) を使用する必要があります。

CSS は次のようになります。

。効果{
  幅:100%;
  高さ:100%;
  パディング上部:50px;
  フィルター:コントラスト(10);
  背景:#fff;
}
.ブラックボール{
  幅:100ピクセル;
  高さ:100px;
  背景:黒;
  パディング:10px;
  境界線の半径:50%;
  マージン:0 自動;
  zインデックス:1;
  フィルター:ぼかし(5px);
}
.レッドボール{
  幅:60ピクセル;
  高さ:60px;
  背景:#f00;
  パディング:10px;
  境界線の半径:50%;
  位置:絶対;
  上:70px;
  左:50px;
  zインデックス:2;
  フィルター:ぼかし(5px) ;
  アニメーション:rball 6s 無限;
}

CSS の配置値を無視し、ぼかし値を 5px、コントラスト値を 10 に設定すると、赤いボールと黒いボールがくっついているのがわかります。しかし、どうやって動かすのでしょうか。 CSS3 アニメーションを使用する必要があります。アニメーションの手順は次のとおりです。

@keyframes rball{
  0%,100%{
    左:35px;
    幅:60ピクセル;
    高さ:60px;
  }
  4%,54%{
    幅:60ピクセル;
    高さ:60px;
  }
  10%,60%{
    幅:50px;
    高さ:70px;
  }
  20%,70%{
    幅:60ピクセル;
    高さ:60px;
  }
  34%,90%{
    幅:70px;
    高さ:50px;
  }
  41%
    幅:60ピクセル;
    高さ:60px;
  }
  50%{
    左:calc(100% - 95px);
    幅:60ピクセル;
    高さ:60px;
  }
}

ここにはたくさんのキーフレームが書かれていますが、それは赤いボールが黒いボールに入ると水平方向に圧縮され、黒いボールから出ると水平方向に引き伸ばされるからです。こうすることで、より粘着性を感じるようになります。この効果をテストするのに、かなりの労力を費やしました! (ただし、ここで注意すべき点が1つあります。位置は自動的に計算されるので、テストする場合は、最も外側のエフェクトの幅を320pxに設定することを忘れないでください)

赤いボールが完成したら、2 つの青いボールを結合してから分離させる必要があります。同じ原理が適用されます。2 つの青いボールの CSS を以下に示します。注意する必要があるのは、結合後に青いボールを大きくしたため、分離すると細長くなることです。

.ブルーボール1{
  幅:80ピクセル;
  高さ:80px;
  背景:#00f;
  パディング:10px;
  境界線の半径:50%;
  位置:絶対;
  上:230px;
  左:0;
  zインデックス:2;
  フィルター:ぼかし(8px) ;
  アニメーション:bball1 6秒無限;
}
.ブルーボール2{
  幅:80ピクセル;
  高さ:80px;
  背景:#00f;
  パディング:10px;
  境界線の半径:50%;
  位置:絶対;
  上:230px;
  左:240px;
  zインデックス:2;
  フィルター:ぼかし(8px) ;
  アニメーション:bball2 6秒無限;
}
@keyframes bball1{
  0%,100%{
    左:0;
    上:230px;
    幅:80ピクセル;
    高さ:80px;
  }
  20%
    上:230px;
    幅:80ピクセル;
    高さ:80px;
  }
  85%
    上:230px;
    左:75px;
    幅:90ピクセル;
    高さ:70px;
  }
  90%
    上:228px;
    幅:75px;
    高さ:85px;
  }
  50%{
    上:215px;
    左:110px;
    幅:110ピクセル;
    高さ:110ピクセル;
  }
}
@keyframes bball2{
  0%,100%{
    左:240px;
    上:230px;
    幅:80ピクセル;
    高さ:80px;
  }
  20%
    上:230px;
    幅:80ピクセル;
    高さ:80px;
  }
  85%
    上:230px;
    左:165px;
    幅:90ピクセル;
    高さ:70px;
  }
  90%
    上:228px;
    幅:75px;
    高さ:85px;
  }
  50%{
    左:110px;
    上:215px;
    幅:110ピクセル;
    高さ:110ピクセル;
  }
}

このように、CSS を使用するだけでスティッキー効果を実現できます。正直、この効果がどこで使用できるかはよくわかりませんが、水中の世界や読み込みの特殊効果などで使用すれば、かなり良いはずです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Chrome 4.0 は GreaseMonkey スクリプトをサポートします

>>:  secure_file_priv nullの問題を解決する

推薦する

JQuery データグリッドクエリの詳細な説明

目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....

HTML における画像タグの使用方法の詳細な説明

HTML では、<img> タグはテキスト内の画像タグを定義するために使用されます。その...

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...

MYSQL ログとバックアップおよび復元の問題の詳細な説明

この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...

ウェブページのテーブルの境界線を設定する方法

<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...

MySQLのマスタースレーブ構成を使用して、読み取りと書き込みの分離を実現し、データベースの負荷を軽減します。

大規模な Web サイトでは、多数の同時アクセスを処理するために、Web サイト上の分散負荷分散以上...

XHTMLにおけるH1タグの位置について

最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...

Dockerコンテナを使用する簡単な例

目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...

Linux でユーザーをグループに追加する 4 つの方法の概要

序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...

jQueryはすべてのショッピングカート機能を実装します

目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...

xshell を使用して VMware で Linux に接続する方法 (2 つの方法)

【序文】最近、ITOO の試験システムのストレステストを行いたいので、自分のコンピュータに Lin...

MySQLクエリ構文の概要

序文:この記事では主に、MySQL の where、group by、order by、limit、...

Vue.jsは画像切り替え機能を実装する

この記事では、画像切り替え機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具...

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

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

MySql データベースにリモートでログインするにはどうすればよいですか?

はじめに: プロジェクトを開発するために、サーバーに MySql データベース サーバーを展開し、ロ...