Introduzione
Le animazioni in CSS possono trasformare elementi statici in esperienze visive accattivanti. In questa guida, ti mostreremo come creare un sorprendente effetto snake utilizzando solo CSS, senza l’ausilio di JavaScript. Questo effetto può aggiungere un tocco interattivo e dinamico alle immagini del tuo sito web.
Anteprima dell’Effetto
Prima di immergerci nel codice, ecco un’anteprima di ciò che realizzeremo:
Il Codice Completo
Ecco il codice HTML e CSS necessario per creare l’effetto snake:
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Effetto Snake in CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clip">
<img src="logo.png" alt="Logo">
</div>
</body>
</html>CSS (styles.css)
.clip {
position: relative;
display: grid;
place-items: center;
width: 90px;
height: 90px;
}
.clip img {
width: 90%;
height: 90%;
}
@keyframes clipMe {
0%, 100% { clip: rect(0, 100px, 2px, 0); }
25% { clip: rect(0, 2px, 100px, 0); }
50% { clip: rect(98px, 100px, 100px, 0); }
75% { clip: rect(0, 100px, 100px, 98px); }
}
.clip::before,
.clip::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 110%;
height: 110%;
margin: -5%;
box-shadow: inset 0 0 0 2px #f7df1c;
animation: clipMe 3s linear infinite;
}
.clip::before {
animation-delay: -1.5s;
}Spiegazione del Codice
Analizziamo passo per passo come funziona questo effetto.
Struttura HTML
La struttura HTML è semplice e pulita:
<div class="clip">: Un contenitore per l’immagine e l’effetto.<img src="logo.png" alt="Logo">: L’immagine alla quale applicheremo l’effetto.
Stili CSS
Contenitore .clip
.clip {
position: relative;
display: grid;
place-items: center;
width: 90px;
height: 90px;
}
position: relative;: Necessaria per posizionare gli pseudo-elementi assoluti all’interno.display: grid;eplace-items: center;: Centra l’immagine all’interno del contenitore.widtheheight: Definiscono le dimensioni del contenitore.
Immagine all’interno di .clip
.clip img {
width: 90%;
height: 90%;
}Riduciamo leggermente le dimensioni dell’immagine per creare un margine interno rispetto al contenitore.
Animazione @keyframes clipMe
@keyframes clipMe {
0%, 100% { clip: rect(0, 100px, 2px, 0); }
25% { clip: rect(0, 2px, 100px, 0); }
50% { clip: rect(98px, 100px, 100px, 0); }
75% { clip: rect(0, 100px, 100px, 98px); }
}- Utilizziamo l’animazione
clipMeper creare l’effetto di “serpente” che scorre lungo i bordi dell’immagine. - La proprietà
clipviene usata per ritagliare gli elementi in modo dinamico durante l’animazione.
Pseudo-elementi ::before e ::after
.clip::before,
.clip::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 110%;
height: 110%;
margin: -5%;
box-shadow: inset 0 0 0 2px #f7df1c;
animation: clipMe 3s linear infinite;
}
.clip::before {
animation-delay: -1.5s;
}
- Creiamo due pseudo-elementi per sovrapporre l’effetto all’immagine.
box-shadow: Crea un bordo interno che scorre grazie all’animazione.animation-delay: Ritarda l’animazione di uno dei due pseudo-elementi per creare un effetto continuo e fluido.
Personalizzazione dell’Effetto
Puoi personalizzare l’effetto modificando alcuni parametri:
- Colore del bordo: Cambia
#f7df1ccon il colore che preferisci. - Durata dell’animazione: Modifica
animation: clipMe 3s linear infinite;per rendere l’animazione più veloce o più lenta. - Dimensioni del contenitore: Adatta
widtheheightsecondo le tue esigenze.
Compatibilità e Considerazioni
- La proprietà
clipè considerata deprecata in favore diclip-path. Tuttavia, funziona ancora nei browser moderni. - Per una maggiore compatibilità e funzionalità avanzate, considera l’uso di
clip-pathcon poligoni o SVG.
Esempio con clip-path
Ecco come potresti riscrivere l’animazione utilizzando clip-path:
@keyframes clipMe {
0% { clip-path: inset(0% 100% 98% 0%); }
25% { clip-path: inset(0% 98% 0% 0%); }
50% { clip-path: inset(98% 0% 0% 0%); }
75% { clip-path: inset(0% 0% 0% 98%); }
100% { clip-path: inset(0% 100% 98% 0%); }
}Assicurati di verificare la compatibilità con i browser che desideri supportare.
Conclusione
L’effetto snake in CSS è un ottimo esempio di come sia possibile creare animazioni avanzate senza JavaScript. Sperimenta con i valori e le proprietà per adattare l’effetto alle tue esigenze e dare un tocco unico ai tuoi progetti web.
Hai trovato utile questa guida? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
