Comment utiliser du CSS pur pour obtenir l'effet de texte consistant à déchirer du papier d'aluminium (avec code)

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet de texte consistant à déchirer du papier d'aluminium (avec du code). J'espère que ce sera le cas. utile pour vous.

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front- end-daily-challenges

Interprétation du code

Définir dom, le conteneur contient plusieurs sous-éléments, chaque sous-élément contient une lettre :

<div>
    <span>A</span>
    <span>W</span>
    <span>E</span>
    <span>S</span>
    <span>O</span>
    <span>M</span>
    <span>E</span>
</div>

Définir le conteneur size :

body {
  margin: 0;
  height: 100vh;
}

.text {
  width: 100%;
  height: 100%;
}

Définissez la disposition des sous-éléments :

.text {
  display: flex;
  justify-content: space-between;
}

.text span {
    width: 100%;
}

Définissez le style du texte :

.text span {
    color: darkslategray;
    background-color: rgb(127, 140, 141);
    font-family: serif;
    font-size: 12vmin;
    text-shadow: 1px 1px 1px white;
    display: flex;
    align-items: center;
    justify-content: center;
}

Définissez la couleur dégradée de l'arrière-plan de le texte, texte à chiffres impairs Le sens du dégradé du texte pair est opposé :

.text span:nth-child(odd) {
    background: linear-gradient(
        to bottom,
        rgba(127, 140, 141, 0.2) 0%, 
        rgba(127, 140, 141, 0) 33%, 
        rgba(127, 140, 141, 0.7) 66%, 
        rgba(127, 140, 141, 0.2) 100%
    );
}

.text span:nth-child(even) {
    background: linear-gradient(
        to top,
        rgba(127, 140, 141, 0.2) 0%, 
        rgba(127, 140, 141, 0) 33%, 
        rgba(127, 140, 141, 0.7) 66%, 
        rgba(127, 140, 141, 0.2) 100%
    );
}

Ajouter une ligne de séparation entre le texte Il n'est pas nécessaire d'ajouter une ligne de séparation avant le premier texte :

.text span {
    position: relative;
}

.text span:not(:first-child)::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 90%;
    background-color: black;
    left: -5px;
    border-left: 1px solid white;
    border-radius: 50%;
}

Laissez la séparation Dislocation en ligne et hors ligne :

.text span:not(:first-child):nth-child(odd)::before {
    top: 2%;
}

.text span:not(:first-child):nth-child(even)::before {
    bottom: 2%;
}

Fait !

Recommandations associées :

Comment utiliser du CSS pur pour implémenter l'effet spécial de ramasser de la bière pression (code source ci-joint)

Comment utiliser du CSS pur pour implémenter un sablier L'effet d'animation de

Comment utiliser CSS pour implémenter une page qui surveille l'état de la connexion réseau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!