ホームページ > 記事 > ウェブフロントエンド > プラス記号「+」効果を実現する純粋な 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 特殊効果コードがすべて含まれています: その他の関連チュートリアルについては、
CSS3 最新バージョンのリファレンス マニュアルをご覧ください。
以上がプラス記号「+」効果を実現する純粋な CSS (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。