You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.3 KiB
56 lines
1.3 KiB
<template>
|
|
<div>
|
|
<div class="backgrounds" :style="'background: linear-gradient(163deg, #'+C1+', #'+C2+', #'+C3+');'"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
C1: { default: '1C0F41' },
|
|
C2: { default: 'ee3552' },
|
|
C3: { default: '0C1630' },
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.backgrounds {
|
|
// background: linear-gradient(163deg, #1C0F41, #085156, #0C1630);
|
|
background-size: 600% 600%;
|
|
-webkit-animation: AnimationName 30s ease infinite;
|
|
-moz-animation: AnimationName 30s ease infinite;
|
|
-o-animation: AnimationName 30s ease infinite;
|
|
animation: AnimationName 30s ease infinite;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
position:fixed;
|
|
z-index: -1;
|
|
|
|
}
|
|
|
|
@-webkit-keyframes AnimationName {
|
|
0%{background-position:37% 0%}
|
|
50%{background-position:64% 100%}
|
|
100%{background-position:37% 0%}
|
|
}
|
|
@-moz-keyframes AnimationName {
|
|
0%{background-position:37% 0%}
|
|
50%{background-position:64% 100%}
|
|
100%{background-position:37% 0%}
|
|
}
|
|
@-o-keyframes AnimationName {
|
|
0%{background-position:37% 0%}
|
|
50%{background-position:64% 100%}
|
|
100%{background-position:37% 0%}
|
|
}
|
|
@keyframes AnimationName {
|
|
0%{background-position:37% 0%}
|
|
50%{background-position:64% 100%}
|
|
100%{background-position:37% 0%}
|
|
}
|
|
|
|
</style>
|