vue页面背景颜色渐变

<template>
  <div class="dynamic-lines-background"></div>
</template>

<script>
export default {};
</script>

<style scoped>
.dynamic-lines-background {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom right, #f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #009688, #4caf50, #ffc107, #ff5722);
  //background: linear-gradient(to bottom right, #f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #009688, #4caf50, #ffc107, #ff5722, #8bc34a, #3949ab, #9e9e9e, #607d8b);
  background-size: 400% 400%;
  animation: gradientAnimation 10s ease infinite;

  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}
</style>