86 lines
1.3 KiB
Vue
86 lines
1.3 KiB
Vue
<template>
|
|
<div class="animated-logo">
|
|
<div class="animated-logo__bar-1"></div>
|
|
<div class="animated-logo__bar-2"></div>
|
|
<MyLogo class="animated-logo__logo"/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.animated-logo {
|
|
animation: logo-width 800ms 1s ease, logo-height 600ms 1.9s ease;
|
|
animation-fill-mode: both;
|
|
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
color: black;
|
|
}
|
|
|
|
@keyframes logo-width {
|
|
from {
|
|
width: 0;
|
|
}
|
|
|
|
to {
|
|
width: 300px;
|
|
}
|
|
}
|
|
|
|
@keyframes logo-height {
|
|
from {
|
|
height: 10px;
|
|
}
|
|
|
|
to {
|
|
height: 230px;
|
|
}
|
|
}
|
|
|
|
.animated-logo__bar-1, .animated-logo__bar-2 {
|
|
background-color: currentColor;
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
right: 0;
|
|
height: 6px;
|
|
|
|
animation: fadeOut 400ms 2.8s ease-in both;
|
|
}
|
|
|
|
.animated-logo__bar-1 {
|
|
top: 0;
|
|
}
|
|
|
|
.animated-logo__bar-2 {
|
|
bottom: 0;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animated-logo__logo {
|
|
width: 300px;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import MyLogo from "@/assets/media/MyLogo.svg";
|
|
|
|
export default {
|
|
name: "AnimatedLogo",
|
|
components: { MyLogo }
|
|
};
|
|
</script>
|