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 {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
padding: 4px;
border-radius: 32px;
// background-color: #8060c0;
background: linear-gradient(45deg, #8060c0 0, #8060c0 45%, #ffffff 50%, #8060c0 55%, #8060c0 100%);
background: linear-gradient(45deg, #8060c0 0, #8060c0 65%, #ffffff 70%, #8060c0 75%, #8060c0 100%);
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 {
@ -102,8 +117,16 @@ export default {
}
}
}
@keyframes finals-gradient__fade-in {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes finals-gradient {
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>