CSS 箭头图片的动态样式突出数据对比是上升还是下降 - 附完整示例

用箭头图片的动态样式突出数据对比是上升还是下降在日常开发中还是比较常见的，特别是可视化大屏，因此在此记录一下

效果

一、上升

二、下降

一、准备图片

二、设置样式

.scroll-box-up {
  height: 20px;
  overflow: hidden;
  animation: up 2s linear infinite;
}

.scroll-box-down {
  height: 20px;
  overflow: hidden;
  animation: down 2s linear infinite;
}

@keyframes up {
  0% {
	transform: translateY(20%);
  }

  100% {
	transform: translateY(-10%);
  }
}

@keyframes down {
  0% {
	transform: translateY(-20%);
  }

  100% {
	transform: translateY(10%);
  }
}
.imgs {
  display: inline-block;
  width: 10px;
  height: 14px;
}

三、完整示例

<template>
  <div>
	<div class="scroll-box-up">
      <img class="imgs" :src="arrowUp" />
	</div>
  </div>

  <div>
	<div class="scroll-box-down">
	  <img class="imgs" :src="arrowDown" />
	</div>
  </div>  
</template>

<script lang="ts" setup name="css">
import arrowUp from '../assets/arrowUp.png';
import arrowDown from '../assets/arrowDown.png';
</script>

<style scoped>

.scroll-box-up {
  height: 20px;
  overflow: hidden;
  animation: up 2s linear infinite;
}

.scroll-box-down {
  height: 20px;
  overflow: hidden;
  animation: down 2s linear infinite;
}

@keyframes up {
  0% {
	transform: translateY(20%);
  }

  100% {
	transform: translateY(-10%);
  }
}

@keyframes down {
  0% {
	transform: translateY(-20%);
  }

  100% {
	transform: translateY(10%);
  }
}
.imgs {
  display: inline-block;
  width: 10px;
  height: 14px;
}
</style>

  欢迎关注VX公众号：前端小知识营地