From 00a967c2f86780a4da92a414522fde8584cb9c9d Mon Sep 17 00:00:00 2001 From: clement franckelemon <clement.franckelemon.etu@univ-lille.fr> Date: Sun, 2 Mar 2025 10:59:04 +0100 Subject: [PATCH] :lipstick: add text effect on 404 error --- src/pages/ErrorNotFound.vue | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/pages/ErrorNotFound.vue b/src/pages/ErrorNotFound.vue index 18ed7c8..80adf50 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> -- GitLab