CSS3实现可缩放显示菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现可缩放显示菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3实现可缩放显示菜单</title>
 <style type="text/css">
    *{margin:0;padding:0;font-size:14px;}
    body{font-family:arial,sans-serif;background:#6CC1EA;padding:1em}
    .character{
      background:url(codepo8.png) no-repeat center top #fff;
      padding:250px 0 0 0;
      text-align:center;
      position:absolute;
      top:0;
      left:0;
      width:320px;
      height:70px;
      -moz-border-radius:160px;
      -moz-box-shadow:5px 5px 5px rgba(0,0,0,.4); 
      -webkit-border-radius:160px;
      -webkit-box-shadow:5px 5px 5px rgba(0,0,0,.4); 
      border-radius:160px;
      box-shadow:5px 5px 5px rgba(0,0,0,.4); 
      font-size:20px;
      color:#333;
    }
    .character a{
      display:block;
      color:#369;
      text-decoration:none;
    }
    #whonav{margin-left:290px}
    #booknav{margin-left:315px}
    #blognav{margin-left:330px}
    #videonav{margin-left:345px}
    #audionav{margin-left:330px}
    #meetnav{margin-left:310px}
    #container{
      position:relative;
      height:200px;
      width:600px;
      margin:0 auto;
      -moz-transform:scale(.3);
      -moz-transition:all .5s;
      -webkit-transform:scale(.3);
      -webkit-transition:all .5s;
      -o-transform:scale(.3);
      -o-transition:all .5s;
      transform:scale(.3);
      transition:all .5s;
    }
    #container:hover{
      -moz-transform:scale(1);
      -webkit-transform:scale(1);
      -o-transform:scale(1);
      transform:scale(1);
    }
    .mainnav li{
      list-style:none;
      display:block;
    }
    .mainnav a,section h1{
      text-decoration:none;
      font-family:calibri,arial,sans-serif;
      font-weight:bold;
      font-size:40px;
      color:#fff;
      text-shadow:1px 2px 1px rgba(0,0,0,.9);
      -moz-transition:all .5s;
      -webkit-transition:all .5s;
      -o-transition:all .5s;
      transition:all .5s;
    }
    .mainnav a:hover{
      color:#F8931D;
      -moz-transform:scale(1.1);
      -webkit-transform:scale(1.1);
      -o-transform:scale(1.1);
      transform:scale(1.1);
    }
    section{
      display:block;
      margin:150px auto 0 auto;
      width:600px;
    }
    section h1{font-size:30px;margin-bottom:10px}
    #container {
      -moz-animation-delay:.5s;
      -moz-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-delay:.5s;
      -webkit-animation-duration: 1s;
      -webkit-animation-name: slidein;
      -o-animation-delay:.5s;
      -o-animation-duration: 1s;
      -o-animation-name: slidein;
    }
    @-o-keyframes slidein {
      0% {-o-transform:scale(.3);}
      50% {-o-transform:scale(1);}
      100% {-o-transform:scale(.3);}
    }
    @-moz-keyframes slidein {
      0% {-moz-transform:scale(.3);}
      50% {-moz-transform:scale(1);}
      100% {-moz-transform:scale(.3);}
    }
    @-webkit-keyframes slidein {
      0% {-webkit-transform:scale(.3);}
      50% {-webkit-transform:scale(1);}
      100% {-webkit-transform:scale(.3);}
    }
    section{
      -moz-animation-duration: 1s;
      -moz-animation-name: movein;
      -webkit-animation-duration: 1s;
      -webkit-animation-name: movein;
      -o-animation-duration: 1s;
      -o-animation-name: movein;
      animation-duration: 1s;
      animation-name: movein;
    }
    @-webkit-keyframes movein {
      from {margin-top:-200px;}
      to {margin-top:150px;}
    }
    @-o-keyframes movein {
      from {margin-top:-200px;}
      to {margin-top:150px;}
    }
    @-moz-keyframes movein {
      from {margin-top:-200px;}
      to {margin-top:150px;}
    }
  </style>
</head>
<body>
  <div id="container">
  <header>
    <h1 class="character">Christian Heilmann</h1>
  </header>
  <nav>
    <ul class="mainnav">
      <li id="whonav"><a href="#about">Who am I?</a></li>
      <li id="booknav"><a href="#books">Things I wrote</a></li>
      <li id="blognav"><a href="#blogs">Where I write</a></li>
      <li id="videonav"><a href="#video">See me talk</a></li>
      <li id="audionav"><a href="#audio">Hear me talk</a></li>
      <li id="meetnav"><a href="#meet">Meet me</a></li>
    </ul>
  </nav>
  </div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)