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.
58 lines
1.3 KiB
58 lines
1.3 KiB
5 years ago
|
<template>
|
||
|
<div>
|
||
|
<div class="backgrounds"></div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
props: {
|
||
|
R1: { default: 130 },
|
||
|
R2: { default: 64 },
|
||
|
G1: { default: 0 },
|
||
|
G2: { default: 64 },
|
||
|
B1: { default: 250 },
|
||
|
B2: { default: 64 },
|
||
|
},
|
||
|
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
|
||
|
.backgrounds {
|
||
|
background: linear-gradient(163deg, #246655, #602466, #e3533c);
|
||
|
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;
|
||
|
|
||
|
}
|
||
|
|
||
|
@-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>
|