【发布时间】：2020-07-21 06:19:36
【问题描述】：
我有一个使用文本徽标的网站，我的意思是字面意义上的文本徽标（不是 png 或 jpg 形式的文本）。我希望在导航菜单打开时徽标消失，反之亦然。请注意，导航菜单在打开时会覆盖整个屏幕，这意味着它是一个覆盖导航菜单。并提前致谢！！
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay5').toggleClass('open');
});
$('a.myClass').click(function() {
$('#toggle').toggleClass('active');
$('#overlay5').toggleClass('open');
});@font-face {
font-family: "LIBRARY 3 AM";
src: url("Library3am-5V3Z.otf");
src: url("Library3am-5V3Z.otf") format("opentype"),
}
body {
background-color: black;
background-image: repeating-linear-gradient(to bottom, transparent 7px, rgba(0, 0, 0, 0.8) 9px, rgba(0, 0, 0, 0.8) 13px, transparent 13px);
background-size: 58px 58px;
background-position: 0 2px, 4px 35px, 29px 31px, 34px 6px
}
.sign {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-family: 'LIBRARY 3 AM';
width: 50%;
height: 50%;
background-image: radial-gradient(ellipse 50% 35% at 50% 50%, , transparent);
transform: translate(-50%, -50%);
letter-spacing: 2;
left: 50%;
top: 50%;
font-size: 1.7em;
color: #39b54a;
text-shadow: 0 0 5px, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
animation: shine 2s forwards, flicker 3s infinite
}
@keyframes blink {
0%,
22%,
36%,
75% {
font-family: 'LIBRARY 3 AM';
text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
color: #32cd32
}
28%,
33% {
color: #32cd32;
text-shadow: none
}
82%,
97% {
color: #32cd32;
text-shadow: none
}
}
.flicker {
animation: shine 2s forwards, blink 3s 2s infinite;
font-family: 'LIBRARY 3 AM'
}
.fast-flicker {
animation: shine 2s forwards, blink 10s 1s infinite;
font-family: 'LIBRARY 3 AM'
}
@keyframes shine {
0% {
color: #32cd32;
text-shadow: none
}
100% {
text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
color: #32cd32
}
}
@keyframes flicker {
from {
opacity: 1
}
4% {
opacity: .9
}
6% {
opacity: .85
}
8% {
opacity: .95
}
10% {
opacity: .9
}
11% {
opacity: .922
}
12% {
opacity: .9
}
14% {
opacity: .95
}
16% {
opacity: .98
}
17% {
opacity: .9
}
19% {
opacity: .93
}
20% {
opacity: .99
}
24% {
opacity: 1
}
26% {
opacity: .94
}
28% {
opacity: .98
}
37% {
opacity: .93
}
38% {
opacity: .5
}
39% {
opacity: .96
}
42% {
opacity: 1
}
44% {
opacity: .97
}
46% {
opacity: .94
}
56% {
opacity: .9
}
58% {
opacity: .9
}
60% {
opacity: .99
}
68% {
opacity: 1
}
70% {
opacity: .9
}
72% {
opacity: .95
}
93% {
opacity: .93
}
95% {
opacity: .95
}
97% {
opacity: .93
}
to {
opacity: 1
}
}
@-webkit-keyframes blink {
20%,
24%,
55% {
color: #111;
text-shadow: none
}
0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
color: #32cd32
}
}
@keyframes blink {
20%,
24%,
55% {
color: #111;
text-shadow: none
}
0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
color: #32cd32
}
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #fff;
}
.button_container.active .middle {
opacity: 0;
background: #fff;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #fff;
}
.button_container span {
background: #0087cc;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay5 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay5:before {
content: '';
background: black;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay5:after {
content: '';
background: black;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay5.open {
visibility: visible;
height: 100%;
}
.overlay5.open:before {
left: 0;
}
.overlay5.open:after {
right: 0;
}
.overlay5.open li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
.overlay5.open li:nth-of-type(2) {
animation-delay: 0.45s;
}
.overlay5.open li:nth-of-type(3) {
animation-delay: 0.55s;
}
.overlay5.open li:nth-of-type(4) {
animation-delay: 0.65s;
}
.overlay5 nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Nova';
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay5 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay5 ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay5 ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
}
.overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after {
width: 100%;
}
.overlay5 ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #fff;
transition: 0.35s;
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.header-logo {
display: inline-block;
position: absolute;
margin: 0;
padding-left: 10rem;
left: 10px;
top: 10%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 501;
}
@media only screen and (min-width: 200px) and (max-width: 670px) {
.header-logo {
padding: 11rem;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://wallpapersite.com/images/pages/pic_w/17158.jpg">
<div class="header-logo">
<div class="sign">
<span class="fast-flicker">C</span>ode<span class="flicker">f</span>is<span class="fast-flicker">hh</span>
</div>
</div>
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay5" id="overlay5">
<nav class="overlay-menu">
<ul>
<li><a class="myClass smoothscroll1" href="#">Home</a></li>
<li><a class="myClass smoothscroll2" href="#about">About</a></li>
<li><a class="myClass smoothscroll3" href="#">Work</a></li>
<li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>
</ul>
</nav>
</div>【问题讨论】：
标签： javascript html jquery css navigation