css进阶项目2

　页面由导航栏和内容构成。导航栏刚开始是隐藏的，点击左上角的三条杠之后就会在屏幕中间显示导航栏并有一个过渡的效果。内容部分被放在一个 header 标签里，里面有一个类名为 container 的盒子，它的作用是让内容居中。导航栏放在一个盒子里，左上角的三条杠放在一个类名是 hamburger 的盒子里，剩下的导航栏内容放在 ul 标签里。在三条杠之前加一个复选框，它的作用是让导航栏显示与隐藏。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/menu.css">
  <title>Document</title>
</head>

<body>
  <div class="menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">
      <div>
        <div>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <header id="showcase">
    <div class="container showcase-container">
      <h1>欢迎来到欧青拉少</h1>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet ut doloremque praesentium, dignissimos
        reprehenderit ullam. Tempora, consequuntur ex? Debitis, dolores?</p>
      <a href="#" class="btn">阅读更多</a>
    </div>
  </header>
</body>

</html>

首页的样式

　　创建三个颜色的样式变量。给 container 设置最大宽度 960px，让溢出的内容隐藏。给首页添加透明度为 0.75 的蓝色，然后添加相对定位。用 #showcase::before 给首页添加一张背景图，让 befor 的宽高为百分百，并让它的 z-index 为 -1。给 showcase-container 盒子设置成弹性布局，并让内容水平、垂直居中，然后让字体居中并设置高度百分百。让 h1 的字体和 p 的字体分别为 4rem 和 1.3rem。让阅读更多的样式为内边距 0.75rem 1.5rem，让它的背景色为淡绿色。

:root{
  --primary-color: rgba(13, 110, 139, 0.75);
  --secondary-color: rgba(229, 148, 0, 0.9);
  --overlay-color: rgba(24, 39, 51, 0.85);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.4;
}
.container{
  max-width: 960px;
  margin: auto;
  overflow: hidden;
  padding: 0 3rem;
}
/* 首页 */
#showcase{
  background-color: var(--primary-color);
  color: #FFF;
  height: 100vh;
  position: relative;
}
#showcase::before{
  content:'';
  background: url('../img/pexels-kristina-paukshtite-5429260.jpg') no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#showcase .showcase-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}
#showcase .showcase-container h1{
  font-size: 4rem;
}
#showcase .showcase-container p{
  font-size: 1.3rem;
}
.btn{
  display: inline-block;
  border: none;
  text-decoration: none;
  background: var(--primary-color);
  color: #FFF;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  transition: opacity 0.4s ease-in-out;
}
.btn:hover{
  opacity: 0.7;
}

导航栏样式

　　给导航栏的盒子添加绝对定位，让它的 top 和 left 为 0。给左上角的三条杠的盒子添加绝对定位，让它显示在左上角。三条杠的中间一条是一个 div。它的宽为百分百，高为 2px，让它的背景色为白色。上下两条用的是 before 和 after 伪元素制作的，分别让它们的 top 值为 10px 和 -10px 就可以显示上下两条。当复选框为选中状态时让三条杠旋转 135度，让伪元素的 top 为 0，然后让 rotate 的值为 90deg，这样就可以变为叉号。给复选框添加 hover，让它的 rotate 为 225deg，这样就有了旋转的效果。先让背景图隐藏，然后当复选框为选中状态时让背景图显示，这期间要加一个过渡效果。

.menu-wrap{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.menu-wrap .toggler{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}
.menu-wrap .hamburger{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 1rem;
  background: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-wrap .hamburger > div{
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #FFF;
  transition: 0.4s;
}
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after{
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 2px;
  background: #FFF;
  top: -10px;
}
.menu-wrap .hamburger > div::after{
  top: 10px;
}
/* 三个横线旋转     :checked表示选中 */
.menu-wrap .toggler:checked + .hamburger > div{
  transform: rotate(135deg);
}
/* 横线变叉号 */
.menu-wrap .toggler:checked + .hamburger > div::before,
.menu-wrap .toggler:checked + .hamburger > div::after{
  top: 0;
  transform: rotate(90deg);
}
.menu-wrap .toggler:checked:hover + .hamburger > div{
  transform: rotate(225deg);
}

/* 导航栏的背景层 */
.menu-wrap .toggler:checked ~ .menu{
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div{
  transform: scale(2);
  transition: .6s;
}
.menu-wrap .toggler:checked ~ .menu > div > div{
  opacity: 1;
  transition: .4s .1s;
}

.menu-wrap .menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 是否可见 */
  visibility: hidden;
}
.menu-wrap .menu > div{
  background: var(--overlay-color);
  width: 200vw;
  height: 200vh;
  display: flex;
  float: none;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transform: scale(0);
}
.menu-wrap .menu > div > div{
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
}
.menu-wrap .menu > div > div li{
  list-style: none;
  color: #FFF;
  font-size: 0.75rem;
  padding: 1rem;
}
.menu-wrap .menu > div > div li > a{
  color: #FFF;
  text-decoration: none;
  transition: .4s;
}
.menu-wrap .menu > div > div li > a:hover{
  color: var(--secondary-color);
}

posted @ 2022-03-27 10:32 守鹤阅读(101) 评论(0) 收藏举报

刷新页面返回顶部

0529qhy

css进阶项目2

公告