Home esercizi css transizioni

Esercizi Transition CSS

Metti alla prova la tua abilità nel creare effetti di transizione fluidi e accattivanti con le transizioni CSS. Esplora come applicare transizioni a proprietà specifiche, come colore e dimensione, per un’esperienza utente più coinvolgente.

Esercizio 1

Crea una pagina HTML con un elemento `div` che abbia un colore di sfondo rosso. Applica una transizione CSS al colore di sfondo in modo che cambia gradualmente in blu quando il mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      .transition {
        background-color: red;
        transition: background-color 1s;
      }

      .transition:hover {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="transition">
      Passa il mouse qui per vedere la transizione del colore di sfondo.
    </div>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un elemento di dimensioni 100x100 pixel e di colore verde. Applica una transizione CSS alle dimensioni del div in modo che cambiano gradualmente a 150x150 pixel quando il mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      .transition {
        width: 100px;
        height: 100px;
        background-color: green;
        transition: width 1s, height 1s;
      }

      .transition:hover {
        width: 150px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <div class="transition"></div>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un elemento di colore blu. Applica una transizione CSS al colore di sfondo in modo che cambia gradualmente in rosso quando il div ottiene il focus.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      .transition {
        background-color: blue;
        transition: background-color 1s;
      }

      .transition:focus {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div tabindex="0" class="transition">
      Clicca qui per dare il focus e vedere la transizione del colore di sfondo.
    </div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un elemento di dimensioni 150x150 pixel e di colore giallo. Applica una transizione CSS alle dimensioni e al colore di sfondo del div in modo che cambiano gradualmente a 200x200 pixel e verde quando il mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      .transition {
        width: 150px;
        height: 150px;
        background-color: yellow;
        transition: width 1s, height 1s, background-color 1s;
      }

      .transition:hover {
        width: 200px;
        height: 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="transition"></div>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un elemento di colore arancione. Applica una transizione CSS al colore di sfondo in modo che cambia gradualmente in viola quando il mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      .transition {
        background-color: orange;
        transition: background-color 1s;
      }

      .transition:hover {
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="transition">
      Passa il mouse qui per vedere la transizione del colore di sfondo.
    </div>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un elemento di dimensioni 200x100 pixel e di colore magenta. Applica una transizione CSS alla posizione del div in modo che cambia gradualmente a 50 pixel verso destra quando il mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      .transition {
        width: 200px;
        height: 100px;
        background-color: magenta;
        transition: transform 1s;
      }

      .transition:hover {
        transform: translateX(50px);
      }
    </style>
  </head>
  <body>
    <div class="transition"></div>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un elemento di dimensioni 100x100 pixel e di colore ciano. Applica una transizione CSS alla rotazione del div in modo che ruota gradualmente di 45 gradi quando il mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      .transition {
        width: 100px;
        height: 100px;
        background-color: cyan;
        transition: transform 1s;
      }

      .transition:hover {
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="transition"></div>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un elemento di dimensioni 150x150 pixel e di colore verde. Applica una transizione CSS alla dimensione del div in modo che cambia gradualmente a 200x100 pixel quando il mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      .transition {
        width: 150px;
        height: 150px;
        background-color: green;
        transition: width 1s, height 1s;
      }

      .transition:hover {
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="transition"></div>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un elemento di colore blu. Applica una transizione CSS al colore di sfondo in modo che cambia gradualmente in rosso quando il mouse vi passa sopra e ritorna al blu quando il mouse esce dall'elemento.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      .transition {
        background-color: blue;
        transition: background-color 1s;
      }

      .transition:hover {
        background-color: red;
      }

      .transition:not(:hover) {
        transition-delay: 1s;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="transition">
      Passa il mouse qui per vedere la transizione del colore di sfondo.
    </div>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un elemento di dimensioni 200x200 pixel e di colore giallo. Applica una transizione CSS alle dimensioni del div in modo che cambiano gradualmente a 150x150 pixel quando il div ottiene il focus.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      .transition {
        width: 200px;
        height: 200px;
        background-color: yellow;
        transition: width 1s, height 1s;
      }

      .transition:focus {
        width: 150px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <div tabindex="0" class="transition">
      Clicca qui per dare il focus e vedere la transizione delle dimensioni.
    </div>
  </body>
</html>