当前位置：首页 > 网页特效 > css样式 >

图文菜单鼠标悬停有缩放效果CSS3

时间：2013-12-04 17:25 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html>
<head>
<title>CSS3可缩放显示的超酷菜单[www.codesocang.com]源码搜藏网</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(/jscss/demoimg/201311/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">
  <nav>
    <ul class="mainnav">
      <li id="whonav"><a href="#about">我是谁?</a></li>
      <li id="booknav"><a href="#books">联想未来</a></li>
      <li id="blognav"><a href="#blogs">遥远的星球</a></li>
      <li id="videonav"><a href="#video">古老的传说</a></li>
      <li id="audionav"><a href="#audio">亲爱的聊天</a></li>
      <li id="meetnav"><a href="#meet">来见我吧</a></li>
    </ul>
  </nav>
  </div>
<section>
<h1>一个鼠标悬停缩放的图文菜单</h1>
<p>这个菜单基于CSS3技术来实现，有点Flash动画效果的味道，如果你对CSS3非常熟悉，那么还可继续扩展。</p>
</section>
</body>
</html>

网页特效

图文菜单 鼠标悬停有缩放效果CSS3

css样式下载排行

最新文章

图文菜单鼠标悬停有缩放效果CSS3