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

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

不言

Freigeben： 2018-08-28 09:41:13

Original

2384 Leute haben es durchsucht

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

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

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>

Nach dem Login kopieren

Containergröße definieren:

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

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

Nach dem Login kopieren

Legen Sie den Layoutmodus der untergeordneten Elemente fest:

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

.text span {
    width: 100%;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!