前言
使用css实现一组向下的动态箭头效果,如下图
思路
1.使用svg画箭头
2.设置@keyframes,主要是每个箭头加不同的延时。
代码
<div class="down-arrow">
<svg id="more-arrows">
<polygon
class="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 "
/>
<polygon
class="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 "
/>
<polygon
class="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做上下弹动的动画。