Hier sehen Sie eine einfache Hintergrund Animation mit einem Text im Vordergrund.

Animierter Text

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.animated-text {
  width: 100%;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  text-align: center;
  padding: 20px;
  font-size: 24px;
  color: white;
}
</style>
</head>
<body>

<div class="animated-text">Animierter Text</div>

</body>
</html>

Dieser Code erstellt einen Textblock, der seine Hintergrundfarbe von Rot zu Gelb und zurück zu Rot animiert. Du kannst die @keyframes-Regel anpassen, um verschiedene Animationseffekte zu erzielen. Viel Spaß beim Experimentieren!

Erstellt mithilfe von KI Copilot

Comments are closed