前言

使用css实现一组向下的动态箭头效果，如下图

思路

1.使用svg画箭头
2.设置@keyframes，主要是每个箭头加不同的延时。

代码

      <div  class="down-arrow"><svg id="more-arrows"><polygonclass="arrow-top"points="37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3 "/><polygonclass="arrow-middle"points="37.6,45.8 0.8,18.7 4.4,16.4 37.6,41.2 71.2,16.4 74.5,18.7 "/><polygonclass="arrow-bottom"points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 "/></svg></div>.down-arrow {position: absolute;top: 90%;left: 50%;transform: translate(-50%, -50%);/* Arrow & Hover Animation */#more-arrows {width: 75px;height: 65px;transform: scale(0.4);}@keyframes arrow-animation {0% {fill: #d9dadb;opacity: 0.5;}33.33% {fill: #d9dadb;opacity: 0.75;}66.66% {fill: #d9dadb;opacity: 1;}100% {fill: #d9dadb;opacity: 0.75;}}polygon.arrow-top {animation: arrow-animation 1s linear infinite;}polygon.arrow-middle {animation: arrow-animation 1s linear infinite 1.3s;}polygon.arrow-bottom {animation: arrow-animation 1s linear infinite 2.5s;}}

参考

Css写一个会动的箭头 实现的是：使用border画的单个箭头，@keyframes做上下弹动的动画。