From 6abdad63c31847eb2db5b13317ed20777825072d Mon Sep 17 00:00:00 2001 From: "Israni, Murli" Date: Mon, 3 Jun 2024 19:35:00 +0530 Subject: [PATCH] anchor tag animation --- src/layouts/BaseLayout.astro | 12 +++++++--- src/pages/index.astro | 18 ++++++++------- src/styles/main.css | 44 ++++++++++++++++++++++++++++++++---- 3 files changed, 59 insertions(+), 15 deletions(-) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index efcf4bd..e5f151e 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -69,20 +69,26 @@ import Sidebar from './Sidebar.astro'; -
+
-
- +
+

{frontmatter.authors} Just another tech nerd!

+

+ Digital Transformation Strategist, Web Mobile Cloud Technology + and Pre-Sales Consultant, Healthcare & Insurance Consultant, + Strategic Accounts, Certified Associate AWS & Azure Solution + Architect +

diff --git a/src/pages/index.astro b/src/pages/index.astro index 8286024..951d681 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -45,7 +45,7 @@ import '../styles/main.css'; Have a question? -
Ask me on Twitter +
Ask me on Twitter

- + - @@ -151,4 +151,6 @@ import '../styles/main.css'; + + diff --git a/src/styles/main.css b/src/styles/main.css index 8890d7d..11f1cb9 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -171,14 +171,12 @@ li { color: #21242c; } -.effect-six > a, -a { +.effect-six > a { padding: 0 5px; box-shadow: inset 0 0 0 0 white; transition: all 0.4s ease-in-out 0s; } -.effect-six > a:hover, -a:hover { +.effect-six > a:hover { box-shadow: inset 300px 0 0 0 white; color: #21242c; } @@ -202,3 +200,41 @@ a:hover { box-shadow: inset 0 300px 0 0 white; color: #21242c; } + +/* a { + position: relative; + color: #ffffff; + text-decoration: none; +} + +a::after { + content: ""; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + left: 0; + background-color: #ffff00; + transform-origin: bottom right; + transition: transform 0.25s ease-out; +} + +a:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} */ + +a { + text-decoration: none; + background-image: linear-gradient(#ec4899, #eab308); + background-position: 0% 100%; + background-repeat: no-repeat; + background-size: 0% 2px; + transition: background-size 0.3s; +} + +a:hover, +a:focus { + background-size: 100% 2px; +}