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

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

不言

Libérer： 2018-08-28 09:41:13

original

2352 Les gens l'ont consulté

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

Comment utiliser du CSS pur pour obtenir leffet de texte consistant à déchirer du papier daluminium (avec code)

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>

Copier après la connexion

Définir le conteneur size :

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

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

Copier après la connexion

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

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

.text span {
    width: 100%;
}

Copier après la connexion

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;
}

Copier après la connexion

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%
    );
}

Copier après la connexion

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%;
}

Copier après la connexion

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%;
}

Copier après la connexion

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!