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の問題を解決する