CSS で「プラス記号」効果を実装するためのサンプルコード

以下に示すプラス記号の効果を実現するには:

この効果を実現するには、div 要素だけが必要です。

before、after、border プロパティには CSS が必要です。

まずdivノートを設定する

 <div class="add"></div>

別の境界線を設定します:

。追加 {
  境界線: 1px 実線;
  幅: 100ピクセル;
  高さ: 100px;
  色: #ccc;
  トランジション: カラー .25 秒;
  位置: 相対的;
}

境界線は次のようになります。

疑似クラス before とその border-top を使用して、「水平」を設定できます。

.add::before{
  コンテンツ： '';
  位置: 絶対;
  左: 50%;
  上位: 50%;
  幅: 80ピクセル;
  左マージン: -40px;
  上マージン: -5px;
  上境界線: 10px 実線;
}

絶対位置を使用していることに注意してください。 こうなります:

上記を参考にして、after 疑似クラスと border-bottom を使用して「垂直」を設定できます。

.add::after {
 コンテンツ： '';
 位置: 絶対;
 左: 50%;
 上位: 50%;
 高さ: 80px;
 左マージン: -5px;
 上マージン: -40px;
 左境界線: 10px 実線;
}

hover 疑似クラスを追加し、マウスがホバーしているときの色を設定します。

.add:hover {
  色: 青;
}

最終的なスタイル:

マウスをその上に置くと色が変わります。

効果はここで確認できます:

https://jsbin.com/quvidap/edit?html、css、出力

要約する

上記は、CSS を使用して「プラス記号」効果を実現する方法のサンプル コードです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。