Tag 7: Übergänge, Animationen & Abschlussprojekt

Ziel

Lerne, wie du Interaktivität und visuelle Feinheiten zu deiner Website hinzufügst mit CSS-Übergängen, Animationen, Hover-Effekten und Pseudo-Elementen.

Themen

CSS-Übergänge: transition: all 0.3s ease;
CSS-Animationen mit @keyframes
Hover-Effekte & Pseudo-Klassen: :hover, :nth-child()
Pseudo-Elemente: ::before, ::after

Übergangsbeispiel

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: green;
}

Animationsbeispiel

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide 2s infinite alternate;
}

Pseudo-Elemente Beispiel

.card::before {
  content: "★";
  color: gold;
  margin-right: 5px;
}

Übung

Füge Hover-Effekte zu Buttons und Links hinzu.
Erstelle eine kleine animierte Box mit @keyframes.
Nutze Pseudo-Elemente, um Karten oder Überschriften zu verbessern.

Abschlussprojekt – Gestaltete Portfolio-Seite

Header: Name und Navigationsleiste
Über mich Bereich: Foto und kurze Biografie
Skills-Bereich: Flexbox oder Grid verwenden, um Fähigkeiten aufzulisten
Portfolio-Karten: Projektkarten mit Hover-Effekten
Kontaktformular: Mit Übergängen beim Fokus und Hover gestaltet
Footer: Sanfte Übergänge und subtile Animationen

Beispiel HTML & CSS

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Portfolio Abschlussprojekt</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #2c3e50;
      color: white;
      padding: 20px;
      text-align: center;
    }

    nav a {
      color: white;
      margin: 0 10px;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    nav a:hover {
      color: #f1c40f;
    }

    .skills {
      display: flex;
      justify-content: space-around;
      margin: 20px;
    }

    .card {
      background-color: #3498db;
      color: white;
      padding: 20px;
      margin: 10px;
      text-align: center;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.05);
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20px auto;
      animation: slide 2s infinite alternate;
    }

    @keyframes slide {
      0% { transform: translateX(0); }
      100% { transform: translateX(50px); }
    }

    footer {
      background-color: #2c3e50;
      color: white;
      text-align: center;
      padding: 10px;
      transition: background-color 0.3s ease;
    }

    footer:hover {
      background-color: #34495e;
    }
  </style>
</head>
<body>

  <header>
    <h1>Mein Portfolio</h1>
    <nav>
      <a href="#">Über</a>
      <a href="#">Fähigkeiten</a>
      <a href="#">Projekte</a>
      <a href="#">Kontakt</a>
    </nav>
  </header>

  <section class="skills">
    <div class="card">HTML</div>
    <div class="card">CSS</div>
    <div class="card">JavaScript</div>
  </section>

  <div class="box"></div>

  <footer>
    <p>© 2026 Mein Portfolio</p>
  </footer>

</body>
</html>