5.1 Cambiamento del colore
CSS-transitions permettono di animare i cambiamenti delle proprietà degli elementi, creando effetti visivi fluidi. Adesso vediamo come utilizzare le transizioni per cambiare il colore, la dimensione e la posizione degli elementi, e mostriamo degli esempi pratici.
Cambiare il colore di un elemento tramite CSS-transitions è uno degli usi più comuni. Questo può includere il cambiamento del colore del testo, dello sfondo o dei bordi di un elemento.
Esempio 1: Cambiamento del colore di sfondo
Questo esempio mostra come cambiare il colore di sfondo di un elemento quando si passa il cursore sopra di esso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambiamento del colore di sfondo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: elemento con dimensioni fisse e colore di sfondo.box:hover: quando si passa il cursore sopra l'elemento, il colore di sfondo cambia dolcemente dal blu al verde in 1 secondo con la funzione di temporizzazione ease
Esempio 2: Cambiamento del colore del testo
Questo esempio mostra come cambiare il colore del testo di un elemento quando si passa il cursore sopra di esso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambiamento del colore del testo</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Hover over me!</div>
</body>
</html>
Spiegazione del codice:
.text: elemento con colore del testo iniziale.text:hover: quando si passa il cursore sopra l'elemento, il colore del testo cambia dolcemente dal rosso al viola in 0.5 secondi con funzione di temporizzazione lineare
5.2 Cambiamento della dimensione
Cambiare la dimensione degli elementi usando CSS-transitions può includere la modifica della larghezza, dell'altezza o di entrambe le dimensioni contemporaneamente.
Esempio 1: Cambiamento della larghezza
Questo esempio mostra come cambiare la larghezza di un elemento quando si passa il cursore sopra di esso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambiamento della larghezza</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: elemento con larghezza iniziale di 100 pixel-
.box:hover: quando si passa il cursore sopra l'elemento, la larghezza aumenta dolcemente fino a 200 pixel in 2 secondi con la funzione di temporizzazioneease-in-out
Esempio 2: Cambiamento dell'altezza
Questo esempio mostra come cambiare l'altezza di un elemento quando si passa il cursore sopra di esso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambiamento dell'altezza</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Spiegazione del codice:
.box: elemento con altezza iniziale di 100 pixel.box:hover: quando si passa il cursore sopra l'elemento, l'altezza aumenta dolcemente fino a 200 pixel in 1.5 secondi con la funzione di temporizzazioneease
5.3 Cambiamento della posizione
Cambiare la posizione degli elementi usando CSS-transitions può includere lo spostamento dell'elemento usando le proprietà
top, right, bottom, left o trasformazioni translate.
Esempio 1: Spostamento tramite left
Questo esempio mostra come spostare un elemento a destra quando si passa il cursore sopra di esso usando la proprietà left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spostamento dell'elemento</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Spiegazione del codice:
.box: elemento con posizione inizialeleft: 0.box:hover: quando si passa il cursore sopra l'elemento, questo si sposta dolcemente a destra di 100 pixel in 2 secondi
Esempio 2: Spostamento usando transform: translate
Questo esempio mostra come spostare un elemento a destra e verso il basso quando si passa il cursore sopra di esso usando la trasformazione translate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spostamento con transform: translate</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Spiegazione del codice:
.box: elemento con trasformazione inizialetranslate(0, 0).box:hover: quando si passa il cursore sopra l'elemento, questo si sposta dolcemente di 100 pixel a destra e 50 pixel verso il basso in 1 secondo
GO TO FULL VERSION