我正在尝试使用 CSS 动画创建响应式导航栏。我正在使用此代码 Codepen_Code ,它无法在我的笔记本电脑上正常运行。当我运行它时,唯一的复选框出现在导航列表下方。如果我必须使用任何类型的 CDN,请帮助我并建议我。
HTML代码
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
<div class="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item"><a href="#" class="navigation__link">Home</a>
</li>
<li class="navigation__item"><a href="#" class="navigation__link">About
us</a> </li>
<li class="navigation__item"><a href="#" class="navigation__link">Contact
Us</a> </li>
</ul>
</nav>
</div>
CSS
.navigation {
&__checkbox {
display: none;
}
&__button {
background-color: #fff;
height: 7rem;
width: 7rem;
border-radius: 50%;
position: fixed;
top: 4rem;
right: 6rem;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(#000, .2);
text-align: center;
cursor: pointer;
}
&__background {
height: 6rem;
width: 6rem;
border-radius: 50%;
position: fixed;
top: 4.5rem;
right: 6.5rem;
background-image: radial-gradient(#2998ff, #5643fa);
z-index: 1000;
transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
}
&__nav {
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1500;
opacity: 0;
width: 0;
transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
&__list {
list-style: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
&__link {
&:link,
&:visited {
display: inline-block;
font-size: 3rem;
font-weight: 300;
padding: 1rem 2rem;
color: #fff;
text-decoration: none;
text-transform: uppercase;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
background-size: 230%;
transition: all .4s;
}
&:hover,
&:active {
background-position: 100%;
color: #2998ff;
transform: translateX(1rem);
}
}
&__checkbox:checked ~ &__background {
transform: scale(80);
}
&__checkbox:checked ~ &__nav {
opacity: 1;
width: 100%;
}
&__icon {
position: relative;
margin-top: 3.5rem;
&,
&::before,
&::after {
width: 3rem;
height: 2px;
background-color: #333;
display: inline-block;
}
&::before,
&::after {
content: "";
position: absolute;
left: 0;
transition: all .2s;
}
&::before { top: -.8rem }
&::after { bottom: -.8rem }
}
&__button:hover &__icon::before {
top: -1rem;
}
&__button:hover &__icon::after {
bottom: -1rem;
}
&__checkbox:checked + &__button &__icon {
background-color: transparent;
}
&__checkbox:checked + &__button &__icon::before {
transform: rotate(135deg);
top: 0;
}
&__checkbox:checked + &__button &__icon::after {
transform: rotate(-135deg);
bottom: 0;
}
}
最佳答案
此样式是 SCSS 并且您正在使用 css 这就是它显示复选框的原因 我自己检查了它并且我从 SCSS 更改css 我看到了结果所以请使用 SCSS 一切都会好的
scss link https://codepen.io/AElkhodary/pen/pVVNBw
css link https://codepen.io/AElkhodary/pen/errBoy
我已经为你制作了一个带有css的版本
关于html - 导航栏没有出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50292761/