動態下拉小箭頭
阿新 • • 發佈：2022-03-15
<div class="pull">
<img class="pull1" :src="ossPath + 'img/index/pull.png?v2'" alt="" />
<img class="pull2" :src="ossPath + 'img/index/pull.png?v2'" alt="" />
<img class="pull3" :src="ossPath + 'img/index/pull.png?v2'" alt="" />
</div>
css
.pull {
position: absolute;
top: calc(1940vw / 11.25);
left: calc(536vw / 11.25);
width: calc(53vw / 11.25);
height: calc(75vw / 11.25);
.pull1 {
width: calc(53vw / 11.25);
height: calc(27vw / 11.25);
animation: pull 1s linear infinite;
}
.pull2 {
width: calc(53vw / 11.25);
height: calc(27vw / 11.25);
animation: pull 1s linear infinite;
animation-delay: 0.2s;
}
.pull3 {
width: calc(53vw / 11.25);
height: calc(27vw / 11.25);
animation: pull 1s linear infinite;
animation-delay: 0.4s;
}
@keyframes pull {
from {
opacity: 1;
}
to {
opacity: 0.2;
}
}
}