Hogyan hozz létre animált középpontos nagyítást és forgatást CSS segítségével

Az animációk hozzáadása a weboldalakhoz látványos módon növeli azok felhasználói élményét. A középpontos nagyítás és forgatás kombinációja egy kreatív módja annak, hogy fokozd weboldalad vonzerejét.

A következő CSS kód egy egyszerű div elemet nagyít középpontosan, miközben egy félkört fordul.

.div {
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  animation: zoomAndRotate 2s forwards;
}

@keyframes zoomAndRotate {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
  }
}

Az @keyframes szabály a zoomAndRotate nevet kapta. A transform tulajdonságon belül az rotate() függvényt használva beállítottuk a forgatást az animáció különböző állapotaira (0%, 50%, 100%). Az animáció így először növeli a méretet és elhaladva az idő feléig elfordul 180 fokkal, majd végül teljes körben megfordul, mielőtt elérné a végállapotot.

Ez az egyszerű, mégis látványos hatás fokozza weboldalad vonzerejét és interaktivitását.

Összefoglalás

A fenti CSS kód egy animációs hatást hoz létre a div elemen. Az animáció kezdetben kicsinyített méretből közepes méretűre nagyítja a divet, közben félkört fordul, és végül visszaáll a közepes méretre. Ez az egyszerű, mégis látványos hatás fokozza weboldalad vonzerejét és interaktivitását.