diff --git a/src/pages/ErrorNotFound.vue b/src/pages/ErrorNotFound.vue index 18ed7c86004644e1e786b4790f5c898379435360..80adf5032eee1268865760663609a1bbe754bbe9 100644 --- a/src/pages/ErrorNotFound.vue +++ b/src/pages/ErrorNotFound.vue @@ -1,7 +1,7 @@ <template> <div class="fullscreen bg-secondary text-white text-center q-pa-md flex flex-center"> <div> - <div :style="$q.screen.lt.sm ? 'font-size: 30vh' : 'font-size: 40vh'" class="text-accent"> + <div :style="$q.screen.lt.sm ? 'font-size: 30vh' : 'font-size: 40vh'" class="text-accent text-effect"> 404 </div> @@ -30,3 +30,25 @@ <script setup lang="ts"> // </script> + +<style scoped> +@supports (-webkit-background-clip: text) { + .text-effect { + background-image: linear-gradient(45deg, #eeea14, #ffffff, #eeea14); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + background-clip: text; + background-size: 300% auto; + animation: textgradient 20s linear infinite; + } + + @keyframes textgradient { + from { + background-position: 0 center; + } + to { + background-position: 300% center; + } + } +} +</style>