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.
63 lines
1.5 KiB
63 lines
1.5 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: 100% 100%;
|
|
// -webkit-animation: MovingBackground 3s ease infinite;
|
|
// -moz-animation: MovingBackground 3s ease infinite;
|
|
// -o-animation: MovingBackground 3s ease infinite;
|
|
animation: MovingBackground 3s ease all infinite;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
position:fixed;
|
|
z-index: -1;
|
|
background-position:0% 0%;
|
|
|
|
}
|
|
|
|
// @-webkit-keyframes MovingBackground {
|
|
// 0%{background-position:37% 0%}
|
|
// 50%{background-position:64% 100%}
|
|
// 100%{background-position:37% 0%}
|
|
// }
|
|
// @-moz-keyframes MovingBackground {
|
|
// 0%{background-position:37% 0%}
|
|
// 50%{background-position:64% 100%}
|
|
// 100%{background-position:37% 0%}
|
|
// }
|
|
// @-o-keyframes MovingBackground {
|
|
// 0%{background-position:37% 0%}
|
|
// 50%{background-position:64% 100%}
|
|
// 100%{background-position:37% 0%}
|
|
// }
|
|
@keyframes MovingBackground {
|
|
0%{background-position:37% 0%}
|
|
50%{background-position:64% 100%}
|
|
100%{background-position:37% 0%}
|
|
}
|
|
@keyframes FadeBackground {
|
|
0%{opacity:1}
|
|
50%{opacity:0}
|
|
100%{opacity:1}
|
|
}
|
|
|
|
|
|
</style>
|