🚀 go-pugleaf

Christian @Soemtron, 2025-03-11 09:30:

> Hi,
>
> eine Frage zu den Entwicklungswerkzeugen.
> Der Inspektor zeigt ja jede Menge Informationen an und gelegentlich nutzt
> mir davon sogar etwas ;-) aber ich befasse mich normalerweise wenig mit
> Web-Entwicklung.
>
> Nun wäre es manchmal interessant, wie ein Seitenbestandteil im Code
> aussieht. Ein Beispiel mit einer kleinen Animation:
> https://www.abteihof-riesling.de
> "Untersuchen" des Wackelbildes zeigt ein Tag mit "onmousemove", was wohl
> für solche Effekte genutzt wird. Da es sich hier trotz deaktiviertem
> Javascript bewegt, ist das vermutlich mit CSS umgesetzt.
>
> Nun die eigentliche Frage: Wie geht man in Firefox vor, um genau den
> Quelltext zu sehen, der für den Effekt verantwortlich ist?

Web Developer Tools - also rechte Maustaste auf das Bild, dann
"untersuchen" und nachsehen, was da alles verwendet wird.

Da findet man z.B. folgende CSS-Klassen:

xr_rn_
xr_ap
xr_1as3
xr_1a6

Weiterhin sieht man im Quelltext, dass folgende CSS-Datei eingebunden
wird, die danach aussieht, als ob da was mit Animationen definiert ist:

<https://www.abteihof-riesling.de/index_htm_files/ani.css>

Und da findet man dann diverse ":hover"-Regeln:

a:hover .xr_1as3, a:hover .xr_1aso3, .xr_0as3 {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

a:hover .xr_1a6, .xr_0a6 {
  -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation-name: swing;
          animation-name: swing;
}

Und die "swing"-Animation ist da auch drin:

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}


--
Arno Welzel
https://arnowelzel.de