<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>
vue页面背景颜色渐变
于 2024-07-17 16:06:42 首次发布