Gradient linéaire et la taille de l'arrière-plan en ajoutant cet effet cool, tout le monde peut expliquer

Question

Je suis désolé si c'est une question stupide, mais ce code me rend fou, je dépouille, pensait que je serai en mesure de comprendre, mais après faire cela et investir 2-4 heures maintenant je suis confus au sujet des choses que je croyais savoir. Ce code ci-dessous ajoute cet effet cool quand je suis fini, il semble que l'arrière-plan est visible depuis le bas et va vers le haut, Je pense que je sais que ça a quelque chose avec l'image de fond, le dégradé linéaire, la taille et le fond position

S'il vous plaît avoir regarder et essayer de me sortir de ma misère. HTML CODE

<ul><li><a href="#" title="Home">Home</a></li> </ul> 

code css

li { 
background-image: 
    linear-gradient(to bottom, 
    transparent 50%, 
    #a2d39c 50%, #a2d39c 95%, #7cc576 95%); 
    background-size: 100% 200%; 
    transition: all .25s ease; 
} 
li:hover { 
    background-position: bottom center;} 

li a {display: block; 
    padding: 1rem 0;} 

Si tout organisme veulent avoir le lien est le lien aussi bien ici.

https://codepen.io/arif_suhail_123/pen/jLPYOB

Answer 1

J'ai annotés vos styles ci-dessous pour expliquer, espérons-ce qui se passe.

li { 
    // You're creating a background gradient, where the first 50% is transparent, the next 45% is #a2d39c and the last 5% is #7cc576 
    background-image: 
     linear-gradient(to bottom, 
     transparent 50%, 
     #a2d39c 50%, #a2d39c 95%, #7cc576 95%); 

    // The background size is twice the height of your element. Therefore with the 50% transparency and initial position, you're not going to see anything 
    background-size: 100% 200%; 

    // This will nicely transition between CSS property values when they change 
    transition: all .25s ease; 
} 
li:hover { 
    // When you hover over your list item, you're changing the position so that the bottom of the background is visible. This causes the 50% transparent portion of the background to disappear, and the coloured portion to slide into view 
    background-position: bottom center;} 
} 

Contexte Position

Si vous consultez les spécifications CSS pour background-position, vous verrez que la valeur par défaut est 0% 0%, qui est essentiellement top left.

Votre code CSS ne spécifie pas de position d'arrière-plan initiale et sera donc top left par défaut. Garde ça en tête.

Votre dégradé d'arrière-plan est défini to bottom, donc à partir de top -> bottom. Le premier 50% est transparent (invisible). Le deuxième 50% est composé de deux couleurs différentes. Ensuite, considérez que votre gradient d'arrière-plan est le double de la hauteur de votre élément. Ceci est spécifié par le background-size: 100% 200% (100% de largeur, 200% de hauteur). L'arrière-plan peut être plus grand que l'élément auquel il est appliqué et tout débordement sera masqué. Donc, au début, lorsque vous ne montrez que la moitié supérieure de votre dégradé d'arrière-plan, qu'allez-vous voir? Seule la partie transparent.

Lorsque vous redéfinissez background-position sur le vol stationnaire, vous affichez maintenant la partie bottom center. Voyant que votre arrière-plan correspond à la largeur totale de votre élément, la valeur horizontale center ne change rien. Mais le réglage vertical bottom fait. Cela signifie maintenant que le second 50% est affiché.

Cela aide-t-il?