Beispiel:Transition-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">

<title>transition - 1</title> <style> a { 

 color: var(--linkColor);
 padding: .25em 1em;
 transition: all .5s;

text-decoration: none; 

 display: inline-block;

}

nav a { width: 6em; background-color: skyblue; transition: transform 0.5s ease, background-color 1s ease; }

nav a:hover, nav a:focus { background-color: gold; transform: translate(5px, 5px); }

@media (prefers-reduced-motion: reduce) { 

 nav a {
   transition: background-color 0.01ms;
   transform: none;
 }

}

aside { a { box-shadow: inset 0 -3px 0 -1px var(--linkColor); }

a:hover, a:focus { 

 	box-shadow: inset 0 -30px 0 var(--linkLighter);

} }

nav li { list-style-type: none; --linkColor: navy; } 


 body {
   display: grid;
   grid-template-columns: 1fr 1fr;	
   gap: 0 .5em;

padding: 1em 3em; } h1,p {grid-column: 1/-1;}


root {
 --linkColor:   oklch(0.5 0.1 235);
 --linkLighter: oklch(0.9 0.04 235);

}

</style> </head>

<body>

Weiche Übergänge mit transition


<nav>

Navigation

  • <a href="#link_1.html">Startseite</a>
  • <a href="#link_2.html">Unterseite 1</a>
  • <a href="#link_3.html">Unterseite 2</a>
  • <a href="#link_4.html">Kontakt</a>

</nav>

<aside>

Weblinks

</aside>

Fahre mit der Maus über die Links, bzw. tabbe mit der Tabulator-Taste (↹).

</body> </html>

Abgerufen am 21.12.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Transition-1.html"