Cambiare dinamicamente il colore in più chiaro o più scuro per percentuale
Per mantenere l'interattività e l'attrattività del sito Web, gli sviluppatori spesso vogliono cambiare i colori dell'elemento dopo un po 'di tempo. Più specificamente, CSS consente agli sviluppatori di cambiare il colore dinamicamente. Funziona in modo tale che una quantità sia moltiplicata tra 0 e 1 per rendere il colore più scuro o più chiaro. Inoltre, l'oscurità predefinita sarà dichiarata come "1", Che non applica alcun effetto colore sull'elemento selezionato.
Questo post dimostrerà:
- Come cambiare dinamicamente il colore in più scuro per percentuale?
- Come cambiare dinamicamente il colore in più chiaro per percentuale?
Come cambiare dinamicamente il colore in più scuro per percentuale?
In CSS, il valore del "filtro"La proprietà viene utilizzata per applicare gli effetti. Questa proprietà inserisce effetti grafici ad alta risoluzione come colore, un po 'di sfocatura o sfocatura completa in un elemento. Più specificamente, i filtri sono comunemente usati per regolare il rendering
Per cambiare dinamicamente il colore in più scuro impostando il valore di "filtro"Proprietà in percentuale, controlla le istruzioni di seguito.
Passaggio 1: crea un contenitore
Prima di tutto, crea il contenitore Div con l'aiuto di ""Elemento e anche inserire un attributo di classe con un nome specifico in base alla tua preferenza.
Passaggio 2: crea un pulsante
Successivamente, utilizza il “"Elemento per creare un pulsante tra il tag di apertura e chiusura del div:
Produzione
Passaggio 3: pulsante di accesso
Ora, utilizza il nome della classe con il selettore di classe ".pulsante"Per accedere al pulsante.
Passaggio 4: applicare le proprietà CSS
Quindi, applica le proprietà sotto l'elenco:
.pulsante
Margine: 70px;
larghezza: 60%;
Bordo: 3px Solid #EC9C08;
imbottitura: 10px;
Colore: #FF0000;
Background-color: RGB (140, 192, 240);
Font-Weight: 200;
Font-size: grande;
FONT: audace;
Qui:
- "margine"La proprietà viene utilizzata per specificare lo spazio vuoto al di fuori del confine.
- "larghezza"Specifica la dimensione dell'elemento in orizzontale.
- "confine"Definisce un limite attorno all'elemento.
- "imbottitura"Viene utilizzato per allocare lo spazio all'interno del confine definito.
- "colore"La proprietà viene utilizzata per impostare il colore dell'elemento.
- "colore di sfondo"Determina un colore per il retro dell'elemento nel confine.
- IL "Font-peso"Il valore determina lo spessore del carattere.
- "dimensione del font"Specifica la dimensione per il carattere come grande.
- "font"È una proprietà stentata utilizzata per allocare il carattere.
Produzione
Passaggio 5: cambia colore in pieno scuro
Accedi al pulsante con la proprietà pseudo-class. Questo corrisponde quando l'utente collega un elemento con un mouse. Tuttavia, non può iniziarlo:
.Button: Hover
Filtro: luminosità (0%);
Nel frammento di codice sopra, il "filtro"La proprietà viene utilizzata per specificare l'effetto sull'elemento. Qui, abbiamo impostato il "luminosità (0%)"Per scuro l'elemento.
Con il valore percentuale dello 0%, il colore del pulsante diventa scuro, il che alla fine nasconde la didascalia:
Per gestire questa situazione, "filtro"Con il valore"(50%)" viene applicata:
.Button: Hover
Filtro: luminosità (50%);
IL "luminosità (50%)"Mostra le variazioni di colore del cinquanta per cento dell'effetto.
Produzione
Come cambiare dinamicamente il colore in più chiaro per percentuale?
Per cambiare dinamicamente il colore in più chiara per percentuale, imposta il valore di "filtro"Proprietà superiore al 50%.
Ad esempio, imposteremo la luminosità del valore su "80%":
.Button: Hover
Filtro: luminosità (80%);
Si può osservare che quando l'utente muove il cursore sul pulsante, il colore dell'effetto hover diventa più chiaro:
Tuttavia, impostare il "100%"Il valore della luminosità non influisce sul colore:
.Button: Hover
Filtro: luminosità (100%);
Produzione
Ti abbiamo insegnato a cambiare dinamicamente il colore in più chiaro o più scuro per percentuale.
Conclusione
Per cambiare dinamicamente il colore in più chiaro o più scuro per percentuale, il "filtro"La proprietà viene utilizzata. Questa proprietà invoca quindi il "luminosità()"Funzione per applicare l'effetto di luminosità. È possibile impostare il suo valore in percentuale da 0 a 100, in cui il piccolo valore cambia il colore in buio e il numero elevato lo rende più leggero. Inoltre, il 100% è la luminosità standard che non aggiunge alcun effetto sul colore. Questo articolo ha spiegato la procedura di modificare dinamicamente il colore per percentuale.