これは純粋に 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の問題を解決する
目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....
HTML では、<img> タグはテキスト内の画像タグを定義するために使用されます。その...
CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...
この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...
<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...
大規模な Web サイトでは、多数の同時アクセスを処理するために、Web サイト上の分散負荷分散以上...
最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...
目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...
序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...
目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...
【序文】最近、ITOO の試験システムのストレステストを行いたいので、自分のコンピュータに Lin...
序文:この記事では主に、MySQL の where、group by、order by、limit、...
この記事では、画像切り替え機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具...
以前にも紹介しました: docker (一般的なアプリケーションのデプロイ): docker dep...
はじめに: プロジェクトを開発するために、サーバーに MySql データベース サーバーを展開し、ロ...