Mit CSS3 wird der Text regelmäßig nach oben gescrollt
Früher hat im Grunde jeder Javascript verwendet, um den Effekt zu erzielen, dass Text in regelmäßigen Abständen nach oben scrollt. Deshalb werde ich Ihnen heute zeigen, wie Sie diesen Effekt mit CSS3 erzielen können.
Es gibt nicht viel zu sagen, gehen wir direkt zum Beispielcode
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>moveUp</title>
<style>
ul,li{ margin:0; padding:0; }
li{ list-style:none; }
.container{ display:inline-block; background:#efefef; padding:10px; border:1px solid #ccc; font-family:"Microsoft YaHei"; }
.container .li-box{ height:28px; overflow:hidden; }
.container ul{ position:relative; animation: moveUp 8s 0.6s infinite; -webkit-animation: moveUp 8s 0.6s infinite; }
@keyframes moveUp
{
0% {top:0px;}
18% {top:0px;}
20% {top:-28px;}
38% {top:-28px;}
40% {top:-56px;}
58% {top:-56px;}
60% {top:-84px;}
78% {top:-84px;}
80% {top:-112px;}
98% {top:-112px;}
}</p> <p> @-webkit-keyframes moveUp /*Safari and Chrome*/
{
0% {top:0px;}
18% {top:0px;}
20% {top:-28px;}
38% {top:-28px;}
40% {top:-56px;}
58% {top:-56px;}
60% {top:-84px;}
78% {top:-84px;}
80% {top:-112px;}
98% {top:-112px;}
}
.container li{ line-height:1.8; color:#666; }
</style>
</head>
<body>
<p>
<p>
<ul>
<li>飞鲨勇士张超：曾驾歼-8战机逼退外军侦察机</li>
<li>台媒炒作大陆军机飞临台海 台军方：全程监控</li>
<li>菲总统对华为何晴转阴：先期待“访华”后欲“清算中国”</li>
<li>外媒称韩国醉心中等强国地位 屡次在关涉中国时遇挫</li>
<li>伊朗官方回应日本驻伊大使被扣押：没有的事儿</li>
<li>菲总统对华为何晴转阴：先期待“访华”后欲“清算中国”</li>
</ul>
</p>
</p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird. Bitte achten Sie auf die chinesische PHP-Website!
Verwandte Empfehlungen:
Schöne Schaltflächen im CSS-Stil erstellt
CSS-Seitenlayout mit linken, mittleren und rechten Spalten Implementieren
Das obige ist der detaillierte Inhalt vonMit CSS3 wird der Text regelmäßig nach oben gescrollt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
So erstellen Sie runde Bilder und Texte in ppt
Mar 26, 2024 am 10:23 AM
Zeichnen Sie zunächst einen Kreis in PPT, fügen Sie dann ein Textfeld ein und geben Sie den Textinhalt ein. Legen Sie abschließend die Füllung und den Umriss des Textfelds auf „Keine“ fest, um die Erstellung kreisförmiger Bilder und Texte abzuschließen.
Wie füge ich in Word Punkte zum Text hinzu?
Mar 19, 2024 pm 08:04 PM
Wenn wir täglich Word-Dokumente erstellen, müssen wir manchmal Punkte unter bestimmten Wörtern im Dokument hinzufügen, insbesondere wenn es Testfragen gibt. Um diesen Teil des Inhalts hervorzuheben, gibt Ihnen der Herausgeber Tipps zum Hinzufügen von Punkten zu Text in Word. Ich hoffe, dass es Ihnen helfen kann. 1. Öffnen Sie ein leeres Word-Dokument. 2. Fügen Sie beispielsweise Punkte unter den Worten „So fügen Sie Punkte zum Text hinzu“ hinzu. 3. Wir wählen zunächst mit der linken Maustaste die Wörter „So fügen Sie Punkte zum Text hinzu“ aus. Beachten Sie, dass Sie, wenn Sie in Zukunft Punkte zu diesem Wort hinzufügen möchten, zunächst das Wort mit der linken Maustaste auswählen müssen . Heute fügen wir diesen Wörtern Punkte hinzu, daher haben wir mehrere Wörter ausgewählt. Wählen Sie diese Wörter aus, klicken Sie mit der rechten Maustaste und klicken Sie im Popup-Funktionsfeld auf Schriftart. 4. Dann erscheint so etwas
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So ändern Sie Text auf Bildern
Aug 29, 2023 am 10:29 AM
Das Ändern des Texts auf dem Bild kann mithilfe von Bildbearbeitungsprogrammen, Online-Tools oder Screenshot-Tools erfolgen. Die einzelnen Schritte sind: 1. Öffnen Sie die Bildbearbeitungssoftware und importieren Sie das zu ändernde Bild. 3. Klicken Sie auf den Textbereich im Bild, um ein Textfeld zu erstellen 5. Wenn Sie nur den Text auf dem Bild löschen möchten, können Sie den Textbereich mit dem Radiergummi oder dem Auswahlwerkzeug auswählen und löschen.
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
Wie implementiert man das Scrollen zu einer bestimmten Elementposition in JavaScript?
Oct 22, 2023 am 08:12 AM
Wie implementiert man die Funktion zum Scrollen zu einer bestimmten Elementposition in JavaScript? Wenn wir auf einer Webseite die Aufmerksamkeit des Benutzers auf eine bestimmte Elementposition lenken müssen, können wir JavaScript verwenden, um die Funktion zum Scrollen zur angegebenen Elementposition zu implementieren. In diesem Artikel wird die Implementierung dieser Funktion über JavaScript vorgestellt und entsprechende Codebeispiele bereitgestellt. Zuerst müssen wir die Positionsinformationen des Zielelements erhalten. Sie können Element.getBoundingClient verwenden
Golang-Bildverarbeitung: Erfahren Sie, wie Sie Wasserzeichen und Text hinzufügen
Aug 17, 2023 am 08:41 AM
Golang-Bildverarbeitung: Erfahren Sie, wie Sie Wasserzeichen und Textzitate hinzufügen: Im modernen Zeitalter der Digitalisierung und der sozialen Medien ist die Bildverarbeitung zu einer wichtigen Fähigkeit geworden. Ob für den persönlichen Gebrauch oder für geschäftliche Zwecke, das Hinzufügen von Wasserzeichen und Text ist ein häufiger Bedarf. In diesem Artikel erfahren Sie, wie Sie Golang für die Bildverarbeitung verwenden und wie Sie Wasserzeichen und Text hinzufügen. Hintergrund: Golang ist eine Open-Source-Programmiersprache, die für ihre prägnante Syntax, effiziente Leistung und leistungsstarke Parallelitätsfähigkeiten bekannt ist. es ist Gegenstand vieler Entwicklungen geworden
