So verwenden Sie reines CSS, um den Texteffekt des Zerreißens von Alufolie zu erzielen (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Texteffekt des Zerreißens von Alufolie (mit Code) zu erzielen. Ich hoffe, dass dies der Fall ist nützlich für Sie.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält mehrere Unterelemente, jedes Unterelement enthält einen Buchstaben:

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

Containergröße definieren:

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

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

Legen Sie den Layoutmodus der untergeordneten Elemente fest:

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

.text span {
    width: 100%;
}

Definieren Sie den Textstil:

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

Legen Sie die Verlaufsfarbe des Texthintergrunds und die Verlaufsrichtung der ungeraden Elemente fest -nummerierter Text und der gerade nummerierte Text Es ist das Gegenteil:

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

Fügen Sie eine Trennlinie zwischen den Wörtern hinzu. Es ist nicht nötig, vor dem ersten Text eine Trennlinie einzufügen:

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

Machen Sie die Trennlinie falsch ausgerichtet:

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

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

Du bist fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Spezialeffekt des Aufnehmens von Fassbier zu implementieren (Quellcode beigefügt)

So verwenden Sie reines CSS, um eine Sanduhr zu implementieren. Der Animationseffekt von

So implementieren Sie CSS, um eine Seite zu implementieren, die den Netzwerkverbindungsstatus überwacht

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um den Texteffekt des Zerreißens von Alufolie zu erzielen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!