CSS - Animierte Unterstreichung
Ich bin ein Hyperlink, unterstreiche mich!
Ich bin ein Hyperlink, unterstreiche mich!
Ich bin ein Hyperlink, unterstreiche mich!
<style>
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
text-decoration: None;
font-size: 1rem;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
<p>
<a href="#" class="hover-underline-animation">Ich bin ein Hyperlink, unterstreiche mich!</a>
</p>
Gefunden bei: https://www.mobirise-tutorials.com/SuperfoodM5/
Beispiel 2
Ich bin ein Hyperlink, überstreiche mich!
Ich bin ein Hyperlink, überstreiche mich!
Ich bin ein Hyperlink, überstreiche mich!
Beispiel 3
Ich bin ein Hyperlink, unterstreiche mich!
Ich bin ein Hyperlink, unterstreiche mich!
Ich bin ein Hyperlink, unterstreiche mich!
Beispiel 4
Ich bin ein Hyperlink, hinterstreiche mich!
Ich bin ein Hyperlink, hinterstreiche mich!
Ich bin ein Hyperlink, hinterstreiche mich!
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen HTML, CSS,
PHP, JavaScript und MySQL.
<table> Tabelle
CSS - Ladeanimation ohne Bild-Grafik
PHP - Arithmetische Operatoren
JavaScript - Anzahl der Wörter als Fortschrittsbalken anzeigen