当前位置:Gxlcms > css > 极具美感的css3icon导航

极具美感的css3icon导航

时间:2021-07-01 10:21:17 帮助过:18人阅读

这个css3 icon导航:主要应用了border-radius,transition,font-face。先设置一个宽度并设置overflow为hidden,然后鼠标滑过用transition来改变其宽度,以显示文字信息部分。至于三个icon,前面两个为font-face做的,后面一个为图片。

html代码:

  1. <div id="header"><p>Go Back to Design Shack</p></div>
  2. <div>
  3. <div>
  4. <a href="http://www.gxlcms.com/">

css代码:

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

人气教程排行