时间戳

首页 > 解决方案 > 如何修复悬停效果未发生

html - 如何修复悬停效果未发生

问题描述

基本上，我使用两个单独的 css 文件，但图标按钮的悬停效果不起作用。我尝试将它放在一个单独的 div 中，但它不起作用。我什至尝试将其中一个 css 文件内容放入 html 文件正文中的标签中。我不知道还能做什么。关于如何解决它的任何想法？

/*first file*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  font-family: "Roboto Cn", sans-serif;
}
body {
  -ms-overflow-x: hidden;
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: #eee;
}
header {
  width: 100%;
  height: 100vh;
  background: -webkit-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
  background: -o-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
  background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
  background-size: cover;
}
p {
  position: relative;
  text-align: center;
  font-family: 'Roboto Cn', sans-serif;
  font-size: 50px;
  top: 50%;
  left: 0;
  text-shadow: 0 0 3px #FF0000, 0 0 5px yellow;
  z-index:2;
}
.container {
  max-width: 120rem;
  width: 90%;
  margin: 0 auto;
}
nav {
  padding-top: 5rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  text-transform: uppercase;
  font-size: 1.6rem;
}
.brand {
  font-size: 3rem;
  font-weight: 300;
  -webkit-transform: translateX(-1000px);
  -o-transform: translateX(-1000px);
  -moz-transform: translateX(-1000px);
  -ms-transform: translateX(-1000px);
  transform: translateX(-1000px);
  -webkit-animation: slideIn 0.5s forwards;
  -o-animation: slideIn 0.5s forwards;
  -moz-animation: slideIn 0.5s forwards;
  animation: slideIn 0.5s forwards;
}
.brand .textgradient {
  font-size: 3rem;
  font-weight: 300;
  background: -webkit-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
  background: -o-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
  background: linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textGradient 4s linear infinite;
  -o-animation: textGradient 4s linear infinite;
  -moz-animation: textGradient 4s linear infinite;
  animation: textGradient 4s linear infinite;
}
@-webkit-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@-o-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@-moz-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
.brand .textgradient2 {
  font-size: 3rem;
  font-weight: 300;
  background: -webkit-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
  background: -o-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
  background: linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
  background-size: 400%;
  background-position: 0%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textGradient 4s linear infinite;
  -o-animation: textGradient 4s linear infinite;
  -moz-animation: textGradient 4s linear infinite;
  animation: textGradient 4s linear infinite;
}
.brand .textgradient3 {
  font-size: 3rem;
  font-weight: 300;
  background: -webkit-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
  background: -o-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
  background: linear-gradient(to right, #0036DA, navy, #0036DA, navy);
  background-size: 400%;
  background-position: 0%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textGradient 4s linear infinite;
  -o-animation: textGradient 4s linear infinite;
  -moz-animation: textGradient 4s linear infinite;
  animation: textGradient 4s linear infinite;
}
@-webkit-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@-o-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@-moz-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
nav.ulnav ul {
  display: flex;
  display: -webkit-flex;
}
nav ul.ulnav li.linav {
  list-style: none;
  -webkit-transform: translateX(1000px);
  -o-transform: translateX(1000px);
  -moz-transform: translateX(1000px);
  -ms-transform: translateX(1000px);
  transform: translateX(1000px);
  -webkit-animation: slideIn 0.5s forwards;
  -o-animation: slideIn 0.5s forwards;
  -moz-animation: slideIn 0.5s forwards;
  animation: slideIn 0.5s forwards;
}
nav ul.ulnav li.linav:nth-child(1) {
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}
nav ul.ulnav li.linav:nth-child(2) {
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
nav ul.ulnav li.linav:nth-child(3) {
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
nav ul.ulnav li.linav:nth-child(4) {
  -webkit-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
nav ul.ulnav li.linav a {
  padding: 1rem 0;
  margin: 0 3rem;
  position: relative;
  letter-spacing: 2px;
}
nav ul.ulnav li.linav a:last-child {
  margin-right: 0;
}
nav ul.ulnav li.linav a:before,
nav ul.ulnav li.linav a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  background-color: gold;
  -webkit-transform: scaleX(0);
  -o-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
nav ul.ulnav li.linav:nth-child(1) a:before,
nav ul.ulnav li.linav:nth-child(1) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, goldenrod, yellow);
  background-color: crimson;
}
nav ul.ulnav li.linav:nth-child(2) a:before,
nav ul.ulnav li.linav:nth-child(2) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, darkred, #F80F01);
}
nav ul.ulnav li.linav:nth-child(3) a:before,
nav ul.ulnav li.linav:nth-child(3) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #0036DA, navy);
}
nav ul.ulnav li.linav:nth-child(4) a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, darkred, #F80F01);
}
nav ul.ulnav li.linav:nth-child(4) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, navy, #0036DA)
}
nav ul.ulnav li.linav a:before {
  top: 0;
  -webkit-transform-origin: left;
  -o-transform-origin: left;
  -moz-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}
nav ul.ulnav li.linav a:after {
  bottom: 0;
  -webkit-transform-origin: right;
  -o-transform-origin: right;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
}
nav ul.ulnav li.linav a:hover:before,
nav ul.ulnav li.linav a:hover:after {
  -webkit-transform: scaleX(1);
  -o-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
@-webkit-keyframes slideIn {
  from {

  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
/*second file*/
.c {
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  min-height: 100vh;
}
ul {
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
}
ul li.b {
  position: relative;
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul li.b:before, ul li.b:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-filter: blur(20px);
  filter: blur(20px);
  opacity: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  z-index: -1;
}
ul li.b:after {
  -webkit-filter: blur(40px);
  filter: blur(40px);
}
ul li.b:hover:before, ul li.b:hover:after {
  opacity: 1;
}
ul li.b a {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  text-align: center;
  line-height: 80px;
  color: #fff;
  background: #000;
  font-size: 36px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
ul li.b a.fab {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: rotateY(0deg) scale(0.8);
  -ms-transform: rotateY(0deg) scale(0.8);
  -o-transform: rotateY(0deg) scale(0.8);
  -moz-transform: rotateY(0deg) scale(0.8);
  transform: rotateY(0deg) scale(0.8);
  opacity: 0.2;
}
ul li.b a:hover.fab {
  opacity: 1;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
}
ul li.b:nth-child(1) a, ul li.b:nth-child(1):before, ul li.b:nth-child(1):after {
  background: linear-gradient(45deg, #adc0b3, #1dc200);
}
ul li.b:nth-child(2) a, ul li.b:nth-child(2):before, ul li.b:nth-child(2):after {
  background: linear-gradient(45deg, #7289da, #053bff);
}
ul li.b:nth-child(3) a, ul li.b:nth-child(3):before, ul li.b:nth-child(3):after {
  background: linear-gradient(45deg, #ff3863, #f10);
}
ul li.b:nth-child(4) a, ul li.b:nth-child(4):before, ul li.b:nth-child(4):after {
  background: linear-gradient(45deg, #f0d, #90f);
}
      .glitch {
        font-size: 130px;
        line-height: 1;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        position: absolute;
        top: 80%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        text-decoration: none;
        color: #fff;
      }
      .glitch:before, .glitch:after {
        display:block;
        content: 'Discord Server Link Is Currently Unavailable.';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.8;
      } .glitch:after {
        color: #f0f;
        z-index: -2;
      } .glitch:before {
        color: #0ff;
        z-index: -1;
      }
      .glitch:before {
        -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        -moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
      }
      .glitch:after {
        -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        -moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
      }
@-webkit-keyframes glitch {
        0% {
          -webkit-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -webkit-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -webkit-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -webkit-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -webkit-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -webkit-transform: translate(0px);
          transform: translate(0px);
        }
}
@-moz-keyframes glitch {
        0% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -moz-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -moz-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -moz-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -moz-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
}
@-o-keyframes glitch {
        0% {
          -o-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -o-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -o-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -o-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -o-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -o-transform: translate(0px);
          transform: translate(0px);
        }
}
@-moz-keyframes glitch {
        0% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -moz-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -moz-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -moz-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -moz-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
}
@keyframes glitch {
        0% {
          transform: translate(0px);
        }
        20% {
          transform: translate(-5px, 5px);
        }
        40% {
          transform: translate(-5px, -5px);
        }
        60% {
          transform: translate(5px, 5px);
        }
        80% {
          transform: translate(5px, -5px);
        }
        100% {
          transform: translate(0px);
        }
}
      .glitch {
        font-size: 25px;
        line-height: 1;
        font-family: 'Poppins', sans-serif;
        font-weight: 100;
        position: absolute;
        bottom:10px;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        text-decoration: none;
        color: #fff;
      }
      .glitch:before, .glitch:after {
        display:block;
        content: 'Discord Server Link Is Currently Unavailable';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.8;
      } .glitch:after {
        color: #f0f;
        z-index: -2;
      } .glitch:before {
        color: #0ff;
        z-index: -1;
      }
      .glitch:before {
        -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        -moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
      }
      .glitch:after {
        -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        -moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
      }
      @-webkit-keyframes glitch {
        0% {
          -webkit-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -webkit-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -webkit-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -webkit-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -webkit-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -webkit-transform: translate(0px);
          transform: translate(0px);
        }
      }
            @-o-keyframes glitch {
        0% {
          -o-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -o-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -o-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -o-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -o-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -o-transform: translate(0px);
          transform: translate(0px);
        }
      }
            @-moz-keyframes glitch {
        0% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -moz-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -moz-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -moz-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -moz-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
      }
            @keyframes glitch {
        0% {
          transform: translate(0px);
        }
        20% {
          transform: translate(-5px, 5px);
        }
        40% {
          transform: translate(-5px, -5px);
        }
        60% {
          transform: translate(5px, 5px);
        }
        80% {
          transform: translate(5px, -5px);
        }
        100% {
          transform: translate(0px);
        }
      }
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>GoldenAdrien's Social Accounts</title>
  <link rel="stylesheet" href="css/home.css" type='text/css'>
  <link rel='stylesheet' type='text/css' href='css/style.css'>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
  <header>
      <div class="container">
      <nav>
        <h1 class="brand"><a class='nav' href="index1.html"><span class="textgradient">Golden</span><span class="textgradient2">Adr</span><span class="textgradient3">ien</span></a></h1>
        <ul class="ulnav">
          <li class="linav"><a class='nav' href="#">Home</a></li>
          <li class="linav"><a class='nav2' href="social-accounts.html">Social Links</a></li>
          <li class="linav"><a class='nav3' href="#">Programs</a></li>
          <li class="linav"><a class='nav4' href="#">Contact Me</a></li>
        </ul>
      </nav>
    </div>
    <div class='c'>
  <ul>
    <li class='b'><a href="https://www.deviantart.com/goldenadrien" target="_blank"><i class="fab fa-deviantart" aria-hidden="true"></i></a></li>
    <li class='b'><a href="#" target="_blank"><i class="fab fa-discord" aria-hidden="true"></i></a></li>
    <li class='b'><a href="https://www.youtube.com/channel/UCoZ8G6mRt6U2wO5uRdmSfLQ/featured" target="_blank"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
    <li class='b'><a href="https://github.com/GoldenAdrien" target="_blank"><i class="fab fa-github" aria-hidden="true"></i></a></li>
  </ul>
  <a href="#" class="glitch">Discord Server Link Is Currently Unavailable.</a>
  </div>
  </header>
</body>

</html>

标签： htmlcss

解决方案

添加z-index:0到ul li.b以创建堆叠上下文并避免您设置z-index:-1后面的伪元素：

还有一个选择器问题（你缺少一个空格）

/*first file*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  font-family: "Roboto Cn", sans-serif;
}
body {
  -ms-overflow-x: hidden;
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: #eee;
}
header {
  width: 100%;
  height: 100vh;
  background: -webkit-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
  background: -o-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
  background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
  background-size: cover;
}
p {
  position: relative;
  text-align: center;
  font-family: 'Roboto Cn', sans-serif;
  font-size: 50px;
  top: 50%;
  left: 0;
  text-shadow: 0 0 3px #FF0000, 0 0 5px yellow;
  z-index:2;
}
.container {
  max-width: 120rem;
  width: 90%;
  margin: 0 auto;
}
nav {
  padding-top: 5rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  text-transform: uppercase;
  font-size: 1.6rem;
}
.brand {
  font-size: 3rem;
  font-weight: 300;
  -webkit-transform: translateX(-1000px);
  -o-transform: translateX(-1000px);
  -moz-transform: translateX(-1000px);
  -ms-transform: translateX(-1000px);
  transform: translateX(-1000px);
  -webkit-animation: slideIn 0.5s forwards;
  -o-animation: slideIn 0.5s forwards;
  -moz-animation: slideIn 0.5s forwards;
  animation: slideIn 0.5s forwards;
}
.brand .textgradient {
  font-size: 3rem;
  font-weight: 300;
  background: -webkit-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
  background: -o-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
  background: linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textGradient 4s linear infinite;
  -o-animation: textGradient 4s linear infinite;
  -moz-animation: textGradient 4s linear infinite;
  animation: textGradient 4s linear infinite;
}
@-webkit-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@-o-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@-moz-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
.brand .textgradient2 {
  font-size: 3rem;
  font-weight: 300;
  background: -webkit-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
  background: -o-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
  background: linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
  background-size: 400%;
  background-position: 0%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textGradient 4s linear infinite;
  -o-animation: textGradient 4s linear infinite;
  -moz-animation: textGradient 4s linear infinite;
  animation: textGradient 4s linear infinite;
}
.brand .textgradient3 {
  font-size: 3rem;
  font-weight: 300;
  background: -webkit-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
  background: -o-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
  background: linear-gradient(to right, #0036DA, navy, #0036DA, navy);
  background-size: 400%;
  background-position: 0%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textGradient 4s linear infinite;
  -o-animation: textGradient 4s linear infinite;
  -moz-animation: textGradient 4s linear infinite;
  animation: textGradient 4s linear infinite;
}
@-webkit-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@-o-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@-moz-keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
@keyframes textGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 90%;
  }
}
nav.ulnav ul {
  display: flex;
  display: -webkit-flex;
}
nav ul.ulnav li.linav {
  list-style: none;
  -webkit-transform: translateX(1000px);
  -o-transform: translateX(1000px);
  -moz-transform: translateX(1000px);
  -ms-transform: translateX(1000px);
  transform: translateX(1000px);
  -webkit-animation: slideIn 0.5s forwards;
  -o-animation: slideIn 0.5s forwards;
  -moz-animation: slideIn 0.5s forwards;
  animation: slideIn 0.5s forwards;
}
nav ul.ulnav li.linav:nth-child(1) {
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}
nav ul.ulnav li.linav:nth-child(2) {
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
nav ul.ulnav li.linav:nth-child(3) {
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
nav ul.ulnav li.linav:nth-child(4) {
  -webkit-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
nav ul.ulnav li.linav a {
  padding: 1rem 0;
  margin: 0 3rem;
  position: relative;
  letter-spacing: 2px;
}
nav ul.ulnav li.linav a:last-child {
  margin-right: 0;
}
nav ul.ulnav li.linav a:before,
nav ul.ulnav li.linav a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  background-color: gold;
  -webkit-transform: scaleX(0);
  -o-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
nav ul.ulnav li.linav:nth-child(1) a:before,
nav ul.ulnav li.linav:nth-child(1) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, goldenrod, yellow);
  background-color: crimson;
}
nav ul.ulnav li.linav:nth-child(2) a:before,
nav ul.ulnav li.linav:nth-child(2) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, darkred, #F80F01);
}
nav ul.ulnav li.linav:nth-child(3) a:before,
nav ul.ulnav li.linav:nth-child(3) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #0036DA, navy);
}
nav ul.ulnav li.linav:nth-child(4) a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, darkred, #F80F01);
}
nav ul.ulnav li.linav:nth-child(4) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, navy, #0036DA)
}
nav ul.ulnav li.linav a:before {
  top: 0;
  -webkit-transform-origin: left;
  -o-transform-origin: left;
  -moz-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}
nav ul.ulnav li.linav a:after {
  bottom: 0;
  -webkit-transform-origin: right;
  -o-transform-origin: right;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
}
nav ul.ulnav li.linav a:hover:before,
nav ul.ulnav li.linav a:hover:after {
  -webkit-transform: scaleX(1);
  -o-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
@-webkit-keyframes slideIn {
  from {

  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
/*second file*/
.c {
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  min-height: 100vh;
}
ul {
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
}
ul li.b {
  position: relative;
  z-index:0;
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul li.b:before, ul li.b:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-filter: blur(20px);
  filter: blur(20px);
  opacity: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  z-index: -1;
}
ul li.b:after {
  -webkit-filter: blur(40px);
  filter: blur(40px);
}
ul li.b:hover:before, ul li.b:hover:after {
  opacity: 1;
}
ul li.b a {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  text-align: center;
  line-height: 80px;
  color: #fff;
  background: #000;
  font-size: 36px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
ul li.b a .fab {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: rotateY(0deg) scale(0.8);
  -ms-transform: rotateY(0deg) scale(0.8);
  -o-transform: rotateY(0deg) scale(0.8);
  -moz-transform: rotateY(0deg) scale(0.8);
  transform: rotateY(0deg) scale(0.8);
  opacity: 0.2;
}
ul li.b a:hover .fab {
  opacity: 1;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
}
ul li.b:nth-child(1) a, ul li.b:nth-child(1):before, ul li.b:nth-child(1):after {
  background: linear-gradient(45deg, #adc0b3, #1dc200);
}
ul li.b:nth-child(2) a, ul li.b:nth-child(2):before, ul li.b:nth-child(2):after {
  background: linear-gradient(45deg, #7289da, #053bff);
}
ul li.b:nth-child(3) a, ul li.b:nth-child(3):before, ul li.b:nth-child(3):after {
  background: linear-gradient(45deg, #ff3863, #f10);
}
ul li.b:nth-child(4) a, ul li.b:nth-child(4):before, ul li.b:nth-child(4):after {
  background: linear-gradient(45deg, #f0d, #90f);
}
      .glitch {
        font-size: 130px;
        line-height: 1;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        position: absolute;
        top: 80%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        text-decoration: none;
        color: #fff;
      }
      .glitch:before, .glitch:after {
        display:block;
        content: 'Discord Server Link Is Currently Unavailable.';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.8;
      } .glitch:after {
        color: #f0f;
        z-index: -2;
      } .glitch:before {
        color: #0ff;
        z-index: -1;
      }
      .glitch:before {
        -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        -moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
      }
      .glitch:after {
        -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        -moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
      }
@-webkit-keyframes glitch {
        0% {
          -webkit-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -webkit-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -webkit-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -webkit-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -webkit-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -webkit-transform: translate(0px);
          transform: translate(0px);
        }
}
@-moz-keyframes glitch {
        0% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -moz-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -moz-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -moz-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -moz-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
}
@-o-keyframes glitch {
        0% {
          -o-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -o-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -o-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -o-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -o-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -o-transform: translate(0px);
          transform: translate(0px);
        }
}
@-moz-keyframes glitch {
        0% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -moz-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -moz-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -moz-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -moz-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
}
@keyframes glitch {
        0% {
          transform: translate(0px);
        }
        20% {
          transform: translate(-5px, 5px);
        }
        40% {
          transform: translate(-5px, -5px);
        }
        60% {
          transform: translate(5px, 5px);
        }
        80% {
          transform: translate(5px, -5px);
        }
        100% {
          transform: translate(0px);
        }
}
      .glitch {
        font-size: 25px;
        line-height: 1;
        font-family: 'Poppins', sans-serif;
        font-weight: 100;
        position: absolute;
        bottom:10px;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        text-decoration: none;
        color: #fff;
      }
      .glitch:before, .glitch:after {
        display:block;
        content: 'Discord Server Link Is Currently Unavailable';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.8;
      } .glitch:after {
        color: #f0f;
        z-index: -2;
      } .glitch:before {
        color: #0ff;
        z-index: -1;
      }
      .glitch:before {
        -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        -moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
      }
      .glitch:after {
        -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        -moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
      }
      @-webkit-keyframes glitch {
        0% {
          -webkit-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -webkit-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -webkit-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -webkit-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -webkit-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -webkit-transform: translate(0px);
          transform: translate(0px);
        }
      }
            @-o-keyframes glitch {
        0% {
          -o-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -o-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -o-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -o-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -o-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -o-transform: translate(0px);
          transform: translate(0px);
        }
      }
            @-moz-keyframes glitch {
        0% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
        20% {
          -moz-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
        }
        40% {
          -moz-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
        }
        60% {
          -moz-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
        }
        80% {
          -moz-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
        }
        100% {
          -moz-transform: translate(0px);
          transform: translate(0px);
        }
      }
            @keyframes glitch {
        0% {
          transform: translate(0px);
        }
        20% {
          transform: translate(-5px, 5px);
        }
        40% {
          transform: translate(-5px, -5px);
        }
        60% {
          transform: translate(5px, 5px);
        }
        80% {
          transform: translate(5px, -5px);
        }
        100% {
          transform: translate(0px);
        }
      }
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>GoldenAdrien's Social Accounts</title>
  <link rel="stylesheet" href="css/home.css" type='text/css'>
  <link rel='stylesheet' type='text/css' href='css/style.css'>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
  <header>
      <div class="container">
      <nav>
        <h1 class="brand"><a class='nav' href="index1.html"><span class="textgradient">Golden</span><span class="textgradient2">Adr</span><span class="textgradient3">ien</span></a></h1>
        <ul class="ulnav">
          <li class="linav"><a class='nav' href="#">Home</a></li>
          <li class="linav"><a class='nav2' href="social-accounts.html">Social Links</a></li>
          <li class="linav"><a class='nav3' href="#">Programs</a></li>
          <li class="linav"><a class='nav4' href="#">Contact Me</a></li>
        </ul>
      </nav>
    </div>
    <div class='c'>
  <ul>
    <li class='b'><a href="https://www.deviantart.com/goldenadrien" target="_blank"><i class="fab fa-deviantart" aria-hidden="true"></i></a></li>
    <li class='b'><a href="#" target="_blank"><i class="fab fa-discord" aria-hidden="true"></i></a></li>
    <li class='b'><a href="https://www.youtube.com/channel/UCoZ8G6mRt6U2wO5uRdmSfLQ/featured" target="_blank"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
    <li class='b'><a href="https://github.com/GoldenAdrien" target="_blank"><i class="fab fa-github" aria-hidden="true"></i></a></li>
  </ul>
  <a href="#" class="glitch">Discord Server Link Is Currently Unavailable.</a>
  </div>
  </header>
</body>

</html>

相关： 为什么具有 z-index 值的元素不能覆盖其子元素？

推荐阅读