diff --git a/templates/index.html b/templates/index.html index 5a7f0ae..7309232 100644 --- a/templates/index.html +++ b/templates/index.html @@ -39,6 +39,35 @@ animation: textReveal 1s cubic-bezier(0.77, 0, 0.18, 1) forwards; } + /* Marker-Animation für den Text */ + @keyframes markerAnimation { + 0% { width: 0; opacity: 0; } + 20% { width: 100%; opacity: 0.7; } + 80% { width: 100%; opacity: 0.7; } + 100% { width: 0; opacity: 0; } + } + + .marker-animation { + position: relative; + } + + .marker-animation::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + height: 6px; + width: 0; + background: linear-gradient(to right, rgba(109, 40, 217, 0.3), rgba(139, 92, 246, 0.6), rgba(109, 40, 217, 0.3)); + border-radius: 3px; + opacity: 0; + animation: markerAnimation 2.5s ease-in-out forwards; + } + + .marker-animation-delay::after { + animation-delay: 1.5s; + } + .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } @@ -131,16 +160,9 @@