Fase 2: stilizziamo il cursore con il CSS.

Una volta settata la struttura grazie al linguaggio html, passiamo a dare un po’ di stile al nostro cursore avvalendoci del linguaggio CSS. Creiamo, quindi, il file style.css per stilizzare i nostri cursori:

body {
    cursor: none; /* Nasconde il cursore predefinito */
    background-color: #1D1E22;
}

h1 {
    color: #fff;
    text-align: center;
    margin-top: 50px;
}

.cursor {
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transition: all 0.2s ease;
    transform: translate(-50%, -50%);
}

.cursor-dot {
    width: 10px;
    height: 10px;
    background-color: #43eeeb;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transition: all 0.1s ease;
    transform: translate(-50%, -50%);
}

.cursor-click-effect {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: clickEffect 0.4s ease-out forwards;
}

@keyframes clickEffect {
    0% {
        transform: scale(0.1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

Spiegazione:

• body { cursor: none; }: nasconde il cursore standard del browser per permettere l’uso del cursore personalizzato.
• background-color: #1D1E22;: imposta lo sfondo della pagina su un colore scuro.
• h1 { color: #fff; }: diamo uno stile al titolo principale, centrando il testo e aggiungendo un margine superiore per distanziarlo dall’inizio della pagina.
• .cursor e .cursor-dot: questi sono i due elementi div che funzioneranno come cursori. Li posizioniamo con “absolute” (position: absolute;), li centriamo rispetto alla posizione del mouse con transform: translate(-50%, -50%); e aggiungiamo una transizione fluida per il movimento.
• .cursor-click-effect: definisce l’effetto di click. È un cerchio che si espande e svanisce, animato con @keyframes clickEffect.

A questo punto sei pronto per il terzo ed ultimo step: aggiungiamo interattività con Javascript, nel prossimo articolo!