Question

在这个网站link中，我想知道如何在CSS中设置此效果的箭头

我有一个代码

-webkit-animation: new_icon 2s linear 0s infinite alternate;

但目前这个dosnt工作。

Answer 1

您需要为new_icon声明动画详细信息 - 请参阅您引用的网站上的CSS文件中的代码。您需要相应地更改ID名称。：

  @-webkit-keyframes new_icon {
    0% { -webkit-transform: translate(0px, 5px) ; }
    100% { -webkit-transform: translate(0px, -15px);  }
  }
  @-moz-keyframes new_icon {
        0% { background-position: 0 0; }
      100% { background-position: 0 600%; }
  }



    #lp-pom-image-350, #lp-pom-image-472, #lp-pom-image-473, #lp-pom-image-474, #lp-pom-image-475{
     animation: new_icon 1s linear 0s infinite alternate;
    -webkit-animation: new_icon 2s linear 0s infinite alternate;
  }

Answer 2

您需要设置css动画。以下一个应该做的伎俩：

@-webkit-keyframes bounce {
50% {
-webkit-transform(translateY(-30px));
}
100% {
-webkit-transform(translateY(0px));
}
}
/* For firefox and others than webkit based browsers */
@keyframes bounce {
50% {
transform(translateY(-30px));
}
100% {
transform(translateY(0px));
}
}

然后将其添加到箭头类：

.your_arrow_class
{
    -webkit-animation: bounce 2s linear 0s infinite alternate;
    animation: bounce 2s linear 0s infinite alternate;
}

Answer 3

因为你还需要动画集。

在这种情况下，动画被称为：

new_icon

有关其工作原理的详细信息，请阅读css3 animations

new_icon动画可能如下所示：所以把这个添加到你的CSS（不要忘记加前缀），它应该可以工作。

@keyframes new_icon {
    0%   { top: 275px; }
    100% { top: 300px; }
}

问候timmi

CSS3动画 - 无限移动箭头

3 个答案: