Effetti di bordo dinamici con transizioni

Ecco un esempio di codice HTML e CSS per utilizzare i bordi con transizioni.

HTML

<div class="border-transition">
  <p>Land of World</p>
</div>

CSS

.border-transition {
  border: 2px solid black;
  padding: 20px;
  transition: border-color 0.5s ease;
}

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

In questo esempio, abbiamo creato un div con una classe di “border-transition” e un paragrafo al suo interno. Nello stile CSS, abbiamo definito una bordatura di 2 pixel in nero, con un padding di 20 pixel, e una transizione sulla proprietà border-color con una durata di 0,5 secondi e una funzione di transizione di “ease”. Inoltre, abbiamo definito un hover per il div che cambia il colore del bordo in rosso. Quando il mouse viene spostato sopra il div, il bordo passa gradualmente dal nero al rosso grazie alla transizione.