ホームページ > 記事 > ウェブフロントエンド > CSS は 3 次元の水平ボタンメニュー効果を実装します。

CSS は 3 次元の水平ボタンメニュー効果を実装します。

不言オリジナル: 2018-06-25 17:05:182175ブラウズ

この記事では、主に 3 次元効果のある水平ボタンメニュー効果を実装するための CSS コードを紹介します。これは、マウスが上をスライドしたときにボタンを押したときの効果を実現できます。強力な 3D 立体効果があり、 hover 属性に基づく CSS 境界線。必要な方は設定スキルを参照してください。

この記事では、CSS を使用して 3 次元の水平ボタンメニュー効果コードを実装する例について説明します。参考のためにみんなで共有してください。詳細は次のとおりです:

これは、CSS の一般的に使用される UL/LI 構造を採用しており、マウスを配置したときに LI がボタンのスタイルとして定義されます。、3次元効果が表示され、全体的なビジョンは、快適なエクスペリエンス、優れたコード互換性、シンプルさと効率です。

具体的なコードは次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>横向有立体感的CSS按钮式菜单</title>
<style>
#navigation {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
}
#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 4px;
}
#navigation li {
  display: inline;
}
#navigation a:link, #navigation a:visited { 
  margin-right: 2px;
  padding: 3px 10px 2px 10px; 
  color: #A62020;
  background-color: #FCE6EA;
  text-decoration: none;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #717171;
  border-right: 1px solid #717171;
}
#navigation a:hover {
  border-top: 1px solid #717171;
  border-left: 1px solid #717171;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}
</style>
</head>
<body id="contact">
<p id="navigation">
 <ul>
 <li class="recipes"><a href="#">脚本之家</a></li>
 <li class="contact"><a href="#">脚本下载</a></li>
 <li class="articles"><a href="#">网页特效</a></li>
 <li class="articles"><a href="#">官方博客</a></li>
 <li class="articles"><a href="#">友情链接</a></li>
 <li class="buy"><a href="#">联系我们</a></li>
 </ul>
</p>
</body>
</html>

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS は 3 次元の水平ボタン メニュー効果を実装します。

関連記事

CSS は 3 次元の水平ボタンメニュー効果を実装します。