CSS打造导航背景动画效果实例

时间：2022-06-25 21:16:40 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
 
<title>Miracle's blog - 动画导航</title>
 
<sytle>
/*welcome to Miracle's blog*/
* {
  margin: 0;
  padding: 0;
}

body { 
  background: #333;
}

/*HEADER*/
.header {
  
  background: #222;
  color: #eee;
  text-align: center;
  font: 10px/25px "Microsoft Yahei",Helvetica, Verdana, sans-serif; 
}

.header a {
  color: #999;
}

/*CONTAINER*/
.container {
  position: relative;
  overflow: hidden;
  margin: 100px auto;
  
  
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -60;
}

.container li img {
  position: absolute;
  top: 0;
  left: 800px;
  z-index: -50;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

/*NAV*/
nav {
  
  
  background: #fff;
}

nav h1 {
  padding: 20px;
  color: #ccc;
  text-align: right;
  font: 25px "Microsoft Yahei",Georgia, Times, serif;
}

/*UL*/
ul {
  
  
  list-style: none;
}

li a {
  z-index: 1;
  display: block;
  padding-left: 20px;
  
  
  background: white;
  color: #444;
  text-decoration: none;
  font: 14px/30px "Microsoft Yahei",Helvetica, Verdana, sans-serif;
}

li:nth-child(1) {
  padding-top: 50px;
}

li a:hover {
  background: #eee;
}

li a:hover + img {
  left: 0px;
}
</style>
 
</head>
 
<body>
  <div class="header">CSS 导航背景动画切换 - </div>
 
  <div class="container">
    <nav>
      <h1>Miracle's blog</h1>
      <ul>
        <li>
          <a href="#">Home</a>
          <img  src="https://img.111cn.net/uploads/20220923/img_632d56e843f9330.jpg" alt="">
        </li>
        <li>
          <a href="#">About</a>
          <img  src="https://img.111cn.net/uploads/20220923/img_632d56e877a6331.jpg" alt="">
        </li>
        <li>
          <a href="#">Clients</a>
          <img  src="https://img.111cn.net/uploads/20220923/img_632d56e8a706332.jpg" alt="">
        </li>
        <li>
          <a href="#">Work</a>
          <img  src="https://img.111cn.net/uploads/20220923/img_632d56e8f1a0a33.jpg" alt="">
        </li>
        <li>
          <a href="#">Contact</a>
          <img  src="https://img.111cn.net/uploads/20220923/img_632d56e92a8ff34.jpg" alt="">
        </li>
      </ul>
    </nav>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

CSS打造导航背景动画效果实例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程