settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

finals: animation

Browse Source
This commit is contained in:
Settel 2021-09-24 21:40:36 +02:00
parent c4f290303d
commit c751914bb0
1 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/components/Final.vue
View File

@ -52,14 +52,29 @@ export default {
&__table-outer-border { &__table-outer-border {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 4px; padding: 4px;
border-radius: 32px; border-radius: 32px;
// background-color: #8060c0; background: linear-gradient(45deg, #8060c0 0, #8060c0 65%, #ffffff 70%, #8060c0 75%, #8060c0 100%);
background: linear-gradient(45deg, #8060c0 0, #8060c0 45%, #ffffff 50%, #8060c0 55%, #8060c0 100%);
background-size: 400% 400%; background-size: 400% 400%;
animation: finals-gradient 5s ease infinite; animation: finals-gradient 5s linear infinite 5s;
&::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 4px;
border-radius: 32px;
background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, #402080 60%);
background-size: 400% 400%;
animation: finals-gradient__fade-in 5s ease;
}
} }
&__table-head { &__table-head {
@ -102,8 +117,16 @@ export default {
} }
} }
} }
@keyframes finals-gradient__fade-in {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes finals-gradient { @keyframes finals-gradient {
0% { background-position: 130% 50%; } 0% { background-position: 130% 50%; }
100% { background-position: -30% 50%; } 30% { background-position: 130% 50%; }
70% { background-position: 0% 50%; }
100% { background-position: 0% 50%; }
} }
</style> </style>