css:动画高级垂直导航栏王者荣耀导航栏

最新推荐文章于 2023-12-08 14:36:43 发布

小强有个dream

最新推荐文章于 2023-12-08 14:36:43 发布

阅读量705

点赞数

分类专栏： CSS 文章标签： css 动画 html5

本文链接：https://blog.csdn.net/qq_36413371/article/details/120395387

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

垂直导航栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <style type="text/css">
    a {
      display: block;
      width: 120px;
      height: 50px;
      line-height: 50px;
      text-decoration: none;
      text-align: center;
      color:#fff;
    }
    .red {
      background-color: red;
    }
    .red:hover {
      width: 180px;
      background-color: purple;
    }
    .skyblue {
      background-color: skyblue;
    }
    .skyblue:hover {
      width: 180px;
      background-color: red;
    }
    .pink {
      background-color: pink;
    }
    .pink:hover {
      width: 180px;
      background-color: orange;
    }
    .purple {
      background-color: purple;
    }
    .purple:hover {
      width: 180px;
      background-color: blue;
    }
    .orange {
      background-color: orange;
    }
    .orange:hover {
      width: 180px;
      background-color: green;
    }
  </style>
</head>
<body>
  <a class="red" href="#">导航项</a>
  <a class="pink" href="#">导航项</a>
  <a class="skyblue" href="#">导航项</a>
  <a class="purple" href="#">导航项</a>
  <a class="orange" href="#">导航项</a>
</body>
</html>

王者荣耀导航栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      /*导航栏通栏背景*/
      .bg {
        position: relative;
        border-bottom: 1px solid #000;
        background-color: rgba(0 ,0 ,0, 0.8);
      }
      .logo {
        margin-top: 16px;
        float: left;
        width: 200px;
        height: 54px;
        background: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png) 0 0 no-repeat;
      }
      .nav {
        width: 1200px;
        height: 83px;
        margin: 0 auto;
      }
      .drop {
        position: absolute;
        width: 100%;
        height: 0;
        background-color: rgba(0 ,0 ,0, 0.7);
        transition: height .5s ease;
      }
      .box {
        margin-top: 42px;
        height: 1100px;
        background: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210916/6208970056642.png) center top no-repeat;
      }
      .nav ul {
        float: left;
        margin-left: 25px;
      }
      .nav li {
        float: left;
      }
      .nav a {
        display: block;
        width: 121px;
        height: 83px;
        line-height: 83px;
        color: #c9c9dd;
        font-size: 18px;
        text-decoration: none;
        text-align: center;
      }
      .nav a:hover {
        color: #e4b653;
        background: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) 0 0 no-repeat;
      }
      /*鼠标经过bg盒子 让drop高度变高*/
      .bg:hover .drop{
        height: 360px;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="bg">
      <div class="nav">
       <div class="logo"></div>
        <ul>
          <li><a href="#"> 网站首页 </a></li>
          <li><a href="#"> 网站首页 </a></li>
          <li><a href="#"> 网站首页 </a></li>
          <li><a href="#"> 网站首页 </a></li>
          <li><a href="#"> 网站首页 </a></li>
          <li><a href="#"> 网站首页 </a></li>
          <li><a href="#"> 网站首页 </a></li>
        </ul>
      </div>
      <div class="drop"></div>
    </div>
  </div>
</body>
</html>

小强有个dream

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css:动画高级垂直导航栏王者荣耀导航栏

垂直导航栏<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content=
复制链接

扫一扫