プラス記号「+」効果を実現する純粋な CSS (コード例)

この記事では、純粋な CSS を使用してプラス記号 " " 効果を実現する方法をコード例を通じて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

下の図のプラス記号効果を実現します。

この効果を実現したい場合、必要なのは div 要素 1 つだけです。

前、後、境界線の機能には CSS を使用する必要があります。

最初に div ノートを設定します

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

次に境界線を設定します:

.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

この時点での境界線は次のようになります:

##前とそのボーダートップの疑似クラスを使用して、「水平」を設定できます。

.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;

}

絶対配置を使用していることに注意してください。この時点では次のようになります:

上記を参照すると、after 疑似クラスと border-bottom を使用して「vertical」を設定できます:

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

追加後、ホバー疑似クラスに移動し、マウスがホバーしたときの色を設定します:

最終スタイル:

マウスがホバーしたとき上にマウスを置くと色が変わります:

さらにクールな CSS3、html5、JavaScript 特殊効果コードがすべて含まれています:

js 特殊効果コレクション

その他の関連チュートリアルについては、

CSS3 最新バージョンのリファレンス マニュアルをご覧ください。

以上がプラス記号「+」効果を実現する純粋な CSS (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。