ホームページ  >  記事  >  ウェブフロントエンド  >  美しい CSS3 アイコンのナビゲーション

美しい CSS3 アイコンのナビゲーション

高洛峰
高洛峰オリジナル
2016-11-24 14:37:341286ブラウズ

この CSS3 アイコン ナビゲーション: 主にボーダー半径、トランジション、フォントフェイスを使用します。まず幅を設定し、オーバーフローを非表示に設定してから、マウスをスライドさせてトランジションを使用して幅を変更し、テキスト情報部分を表示します。 3 つのアイコンのうち、最初の 2 つはフォントフェイス用に作成され、最後の 1 つは写真です。

htmlコード:

<div id="header"><p>Go Back to Design Shack</p></div>
<div>
<div>
<a href="http://www.php.cn/">

CSSコード:

* {margin: 0;padding: 0;}
#header {text-align: center;height: 30px;background: #444;}
#header a {color: #fff;font: 100 14px/30px Helvetica, Verdana, sans-serif;}
#header a:hover {color: #c2e9fa;}
.container {width: 90%;margin: 0 auto;}
/*Button*/.appstorebutton {height: 80px;width: 80px;margin: 50px;position: relative;overflow: hidden;float: left;
-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;
-webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;-ms-transition: width 1s ease;transition: width 1s ease;}
.appstorebutton:hover {width: 275px;}
.appstorebutton a {color: white;text-decoration: none;}
/*Paragraph*/.appstorebutton p {font: 30px/1 Helvetica, Arial, sans-serif;text-align: center;color: white;margin: 4px 0 0 65px;width: 180px;}
.appstorebutton p small {font-size: 15px;}
.iphone small:before {content: "O";position: absolute;font: 70px/1 &#39;ModernPictogramsNormal&#39;, Helvetica, sans-serif;top: 10px;left: 20px;}
.ipad small:before {content: "Q";position: absolute;font: 70px/1 &#39;ModernPictogramsNormal&#39;, Helvetica, sans-serif;top: 10px;left: 13px;}
.mac small:before {content: url(imac.png);position: absolute;top: 22px;left: 18px;}
/*Button Colors*/.iphone {background: #7b7a7f;}
.ipad {background: #2ea9dc;}
.mac {background: #dc2e2e;}
/*Font-Face*/@font-face {font-family: &#39;ModernPictogramsNormal&#39;;src: url(&#39;modernpics-webfont.eot&#39;);src: url(&#39;modernpics-webfont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;),url(&#39;modernpics-webfont.woff&#39;) format(&#39;woff&#39;),url(&#39;modernpics-webfont.ttf&#39;) format(&#39;truetype&#39;),url(&#39;modernpics-webfont.svg#ModernPictogramsNormal&#39;) format(&#39;svg&#39;);font-weight: normal;font-style: normal;
}


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。