css实现导航擦弹悬浮背景文字浮现效果代码-html代码-BFW代码库

css实现导航擦弹悬浮背景文字浮现效果代码

代码语言：html

代码描述：css实现导航擦弹悬浮背景文字浮现效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  
  
<style>
body {
  font-family: "Space Grotesk", sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

.wrap {
  padding: 1.5rem;
}

nav {
  padding: 16px 36px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 6px 16px #f0f3f4;
}
nav container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
nav container ul, nav container .nav_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  gap: 46px;
}
nav container li a {
  padding: 8px;
  letter-spacing: 0.2rem;
  font-size: 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
  color: #999999;
  transition: color 150ms ease-out;
}
nav container li a:hover {
  color: #030303;
}

.logo-text {
  font-size: 1.4rem;
  line-height: 0.8;
  letter-spacing: 0.6rem;
  font-weight: 700;
  position: relative;
  text-transform: uppercase;
}
.logo-text:after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  background: black;
  top: calc(100%/2.7);
  margin-left: 12px;
  border-radius: 2px;
}

.nav--button {
  text-decoration: none;
  text-transform: uppercase;
  padding: 12px 24px;
  color: white;
  border: solid black 2px;
  background: black;
  transition-property: color, background;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  border-radius: 3px;
  cursor: pointer;
}
.nav--button:hover {
  color: black;
  background: transparent;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  border-radius: 5px;
  min-height: 50vh;
  position: relative;
  background-image: url("//repo.bfw.wiki/bfwrepo/icon/60ff85d9f3537.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  padding-top: 24px;
  color: white;
  height: 100%;
  width: 5%;
}
.hero a.left {
  left: 0;
}
.hero a.right {
  right: 0;
}

.hero--button {
  text-decoration: none;
  text-transform: uppercase;
  padding: 12px 24px;
  color: black;
  border: solid white 2px;
  background: white;
  transition-property: color, background;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 24px;
}
.hero--button:hover {
  color: #999999;
}

#nav_big_text {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  color: #eaeef0;
  opacity: 0;
  font-size: 18rem;
  font-weight: 700;
  line-height: 0.8;
  text-transform: uppercase;
  transform: translateX(10%);
  transition-property: transform, opacity;
  transition-duration: 0.25s;
  transition-timing-function: ease-out;
  z-index: -1;
}

#nav_big_text.big_text_active {
  transform: translateX(0%);
  opacity: 1;
}

footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  po.........完整代码请登录后点击上方下载按钮下载查看