Question

我正在尝试混合三种不同的东西。滚动后显示在屏幕中间的菜单，弹出的箭头和单击时打开的侧边菜单。

这是一个包含所有这些“尝试”的示例页面：http://www.new.techmoney360.com/youll-never-look-at-an-rpg-the-same-again/ （它是用wordpress btw制作的）

如果您向下滚动一半，您会看到菜单显示在左侧。

我可以看到有很多问题，但我会随时修复它们。目前，让我疯狂的是一个弹跳箭头。

这就是我想要复制的内容：https://codepen.io/dodozhang21/pen/siKtp

箭头没有弹跳，我不知道为什么？我得到了左边箭头的新图像，正确定位等等。谁能给我一些建议？

以下是我尝试实现此目的的代码：

HTML：

<div id="sliderr" >
    <div class="arrow bounce">
    </div>
    <span style="font-size:30px;cursor:pointer;" onclick="openNav()">Explore More</span>
</div>

css（关于弹跳箭头）：

@import "compass/css3";

@include keyframes(bounce) {
    0%, 20%, 50%, 80%, 100% {
        @include transform(translateY(0));
        }
        40% {
        @include transform(translateY(-30px));
        }
        60% {
        @include transform(translateY(-15px));
        }
}

.arrow {
    position: fixed;
    bottom: 40%;
    left: 0;
    margin-left:-20px;
    width: 40px;
    height: 40px;
    background-image: url("http://www.new.techmoney360.com/wp-content/uploads/2016/06/left-arrow-a.png");
    background-size: contain;
}

.bounce {
@include animation(bounce 2s infinite);
}

css with apearing menu：

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

#sliderr {
    position:fixed;
    top: 100px;
    left: 0px;
    height: 300px;
    width: 130px;
    background: #FFF;
    margin-left: -200px;
    z-index:9;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Answer 1

您的问题很可能是您正在使用示例代码链接中的CSS，但您没有为CSS使用相同类型的预处理器。尝试将您的.bouncs和@keyframes css更改为以下内容：

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

如果现在有效，那么您不使用SASS或SCSS或任何类型的CSS预处理器。要查看您需要使用的CSS，请务必按下＆＃34;查看已编译的＆＃34;在codepen上的css窗口右上角的按钮。它会吐出你可以使用的CSS，而不会通过编译器传递它。另请注意，此css包含供应商前缀，因此它可以跨浏览器工作。

弹跳箭头css - 不起作用？

1 个答案: