Beispielcode zum Scrollen von Text mithilfe von CSS

Der Inhalt dieses Artikels befasst sich mit dem Beispielcode für CSS-Lauftexte. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Rendering

Bildbeschreibung: Der Pfeil zeigt auf das Teil, mit weißem Hintergrund, scrollt von links nach rechts. (Gilt nicht für IE)

Code

html

<div>   
例子：
<div>
<span>滚动的文字，我是滚动的文字</span>
</div>
</div>

CSS

.box {
    height: auto;
    background-color: blue;
}

.box-text{
    color: white;
    background: -ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slidetounlock 3s infinite;
    -webkit-animation: slidetounlock 3s infinite;
}

@-webkit-keyframes slidetounlock{
    0%  {
        background-position:-200px 0
    }
    
    100% {
        background-position:200px 0
    }
}

Implementierungsprinzip

1. Animationseffekt

@-webkit-keyframes

Definieren Sie eine Reihe von Animationen. In dieser Animation wird die Position des Hintergrunds geändert (beachten Sie die Position des Textes)

2. Warum Text anstelle des gesamten Hintergrunds wählen? Hintergrund?

background-clip: text;
作用：指定绘图区的背景
除了text外，还包括 ：border-box|padding-box|content-box;三个属性

3. Wie erreicht man einen kleinen Veränderungseffekt?

gradient()

Funktion: Farbverlauf
Wie Sie am tatsächlichen Effekt erkennen können, ist alles außerhalb des weißen Teils grau, und je näher es an Weiß liegt, desto weißer wird es.

-ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

Beschreibung: Verlaufstyp, linearer Verlauf (z=x*y)
nach links:
Legen Sie den Verlauf von rechts nach links fest. Entspricht: 270 Grad
nach rechts:
legt den Farbverlauf von links nach rechts fest. Entspricht: 90 Grad
nach oben:
legt den Farbverlauf von unten nach oben fest. Äquivalent zu: 0 Grad
nach unten:
legt den Farbverlauf von oben nach unten fest. Entspricht: 180 Grad. Dies ist der Standardwert, der dem Leerlassen des Felds gleichkommt.

Auf diese Weise wird der Verlaufsschriftteil realisiert

-webkit-text-fill-color: transparent;

Schriftfüllfarbe: geerbt und Hintergrund, sodass die Schriftfarbe der Hintergrund des festgelegten Feldtexts ist, nicht der Hintergrundfarbe der Box.

Fügen Sie einfach eine Animation hinzu und bewegen Sie sich in einer Schleife, und fertig.

Das obige ist der detaillierte Inhalt vonBeispielcode zum Scrollen von Text mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!