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

ReadySet animation

Browse Source
This commit is contained in:
Settel 2021-08-14 13:39:46 +02:00
parent ead73a9c2d
commit 459b222e2b
1 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/ReadySet.vue
View File

@ -2,6 +2,8 @@
<div class="ready-set"> <div class="ready-set">
<div class="ready-set__container"> <div class="ready-set__container">
<div class="ready-set__box1" /> <div class="ready-set__box1" />
<div class="ready-set__box2" />
<div class="ready-set__box3" />
<div class="ready-set__text">{{ text }}</div> <div class="ready-set__text">{{ text }}</div>
</div> </div>
</div> </div>
@ -34,6 +36,31 @@ export default {
background-color: #6040c0; background-color: #6040c0;
z-index: 5; z-index: 5;
} }
&__box2 {
position: absolute;
left: 90px;
top: 90px;
width: 420px;
height: 420px;
border-radius: 150px;
background-color: rgba(128,128,64,0.5);
animation: spin-rev 5s linear infinite;
z-index: 4;
}
&__box3 {
position: absolute;
left: 90px;
top: 90px;
width: 420px;
height: 420px;
border-radius: 150px;
background-color: rgba(128,128,64,0.5);
z-index: 3;
animation: spin 6s linear infinite;
}
&__text { &__text {
position: absolute; position: absolute;
width: 600px; width: 600px;
@ -46,4 +73,6 @@ export default {
z-index: 10; z-index: 10;
} }
} }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-rev { 100% { transform: rotate(-360deg); } }
</style> </style>