From cba715ccfd72fc807b55a6230d11f9ba0ca8e813 Mon Sep 17 00:00:00 2001 From: Florent Delerue Date: Wed, 6 Jul 2022 16:11:43 +0200 Subject: [PATCH] feat(loading-template): mouse blurred light effect (#138) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(loadingtemplate): add mouse light effect on mousemove * Update packages/templates/templates/loading/index.html * Update packages/templates/templates/loading/index.html * transparent logo FTW * update Co-authored-by: Sébastien Chopin --- .../ui-templates/templates/loading/index.html | 52 ++++++++++++++----- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/packages/ui-templates/templates/loading/index.html b/packages/ui-templates/templates/loading/index.html index b09b73ce6..4f2a91f2e 100644 --- a/packages/ui-templates/templates/loading/index.html +++ b/packages/ui-templates/templates/loading/index.html @@ -10,21 +10,10 @@ filter: blur(20vh); height: 50vh; } - .spotlight-top { - background: repeating-linear-gradient(to right, #0047E1 0%, #34CDFE 50%, #00DC82 100%); - top: -40vh; - } - .spotlight-bottom { - background: repeating-linear-gradient(to right, #00DC82 0%, #34CDFE 50%, #0047E1 100%); - bottom: -40vh; - } .spotlight-wrapper { opacity: 0.5; transition: opacity 0.4s ease-in; } - .nuxt-logo:hover ~ .spotlight-wrapper { - opacity: 1; - } .nuxt-loader-bar { background: repeating-linear-gradient(to right, #0047E1 0%, #34CDFE 25%, #00DC82 50%, #36E4DA 75%, #0047E1 100%); width: 100%; @@ -34,6 +23,11 @@ animation-fill-mode: forwards; animation-timing-function: linear; } + .mouse-gradient { + background: repeating-linear-gradient(to right, #0047E1 0%, #34CDFE 50%, #00DC82 100%); + filter: blur(100px); + opacity: 0.5; + } @keyframes gradient { 0% { background-position: 0 0; @@ -44,9 +38,10 @@ } - + +
@@ -54,8 +49,37 @@
-
+