我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › 酷屏-CSS3小动画 “向上/向下” 流转箭头 ...

酷屏-CSS3小动画 “向上/向下” 流转箭头

复制链接 | 收藏本帖

2484

: 橙子小试身手Lv3

发表于2021-10-22 10:57

楼主

向上箭头：（效果见附件zip）
html源代码：
<div class='defelement' id='ball-light11' droppable='true' wid='elem' style='background-repeat: no-repeat; width: 31px; height: 29px; left: 2175px; background-color: transparent; background-image: url("vfs/root/products/ebi/sys/picture/sjx/箭头2.png"); border: none; top: 1213px;'>
</div>
CSS样式：
#ball-light11{
animation: fadeup11 2s infinite;
}
@keyframes fadeup11{
0%{
transform: translateY(0);
opacity: 0;
}
30%{
opacity: 1;
}
70%{
opacity: 1;
}
100%{
transform: translateY(-70px);
opacity: 0;
}
}
向下箭头：
html源代码：
<div class='defelement' id='ball-light' droppable='true' wid='elem' style='background-repeat: no-repeat; background-color: transparent; border: none; width: 72px; height: 66px; background-image: url("vfs/root/products/ebi/sys/picture/sjx/箭头-down.png"); left: 2771px; top: 1717px;'>
</div>
CSS样式：
#ball-light {
animation: p-arrow2 3s infinite ;
animation-timing-function: linear;
-webkit-animation-delay:2s;
}
@keyframes p-arrow2 {
0%{
transform: translateY(0);
opacity: 0;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(60px);
opacity: 0;
}
}