Die Mikrointeraktionssafari

744 byby.createsite

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

17 November 2025

Klickbare Animation eines explodierenden Herzens

29 December 2024

Liebe und respektiere die Natur

22 August 2025

Website der Anwaltskanzlei: Tailwind CSS, Rechtsdienstleistungen

HTML

CSS

.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}
.button {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 50px;
  margin-bottom: 20px;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 50px;
  background-color: #F8F8F2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.button:hover::before {
  transform: scaleX(1);
}

.form-input {
  background: transparent;
  border: none;
  color: #F8F8F2;
  width: 200px;
  padding: 10px;
  border-radius: 8px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.form-input:focus {
  opacity: 1;
}

.spinner {
  border: 4px solid #F8F8F2;
  border-top: 4px solid #AE81FF;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-right: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Empfohlen

Klickbare Animation eines explodierenden Herzens

Liebe und respektiere die Natur

Website der Anwaltskanzlei: Tailwind CSS, Rechtsdienstleistungen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS