So erstellen Sie mit CSS einen Marquee-Effekt
Oct 20, 2023 pm 04:30 PM如何使用CSS實(shí)現(xiàn)跑馬燈效果的實(shí)現(xiàn)步驟
跑馬燈效果是一種常見(jiàn)的前端特效,在網(wǎng)頁(yè)中顯示連續(xù)滾動(dòng)的文字或圖片,給頁(yè)面增添了一些動(dòng)感和活力。本文將介紹如何使用CSS來(lái)實(shí)現(xiàn)跑馬燈效果的具體步驟,并提供相應(yīng)的代碼示例供參考。
步驟一:創(chuàng)建HTML結(jié)構(gòu)
首先,我們需要在HTML中創(chuàng)建用來(lái)實(shí)現(xiàn)跑馬燈效果的容器??梢允褂靡粋€(gè)div元素作為容器,如下所示:
<div class="marquee-container"> <ul class="marquee-content"> <li>跑馬燈內(nèi)容1</li> <li>跑馬燈內(nèi)容2</li> <li>跑馬燈內(nèi)容3</li> <!-- 添加更多的跑馬燈內(nèi)容 --> </ul> </div>
在上述代碼中,我們創(chuàng)建了一個(gè)class為"marquee-container"的div元素作為跑馬燈的容器,并在這個(gè)容器內(nèi)部創(chuàng)建一個(gè)class為"marquee-content"的ul元素,用于容納跑馬燈的內(nèi)容。
步驟二:設(shè)置CSS樣式
接下來(lái),我們需要為容器和內(nèi)容設(shè)置相應(yīng)的CSS樣式。具體步驟如下:
- 設(shè)置容器的寬度和高度,并將其設(shè)置為相對(duì)定位(position: relative),以便在容器內(nèi)定位跑馬燈的內(nèi)容。
.marquee-container { width: 100%; height: 100px; position: relative; }
- 設(shè)置內(nèi)容的樣式以及滾動(dòng)效果。將內(nèi)容的ul元素設(shè)置為絕對(duì)定位(position: absolute),并將其寬度設(shè)置為較大的值,以確保內(nèi)容能夠橫向滾動(dòng)。
.marquee-content { list-style: none; margin: 0; padding: 0; position: absolute; white-space: nowrap; /* 防止內(nèi)容換行 */ animation: marquee 10s linear infinite; /* 設(shè)置滾動(dòng)效果 */ } @keyframes marquee { 0% { transform: translateX(0%); } /* 初始狀態(tài),內(nèi)容從左側(cè)顯示 */ 100% { transform: translateX(-100%); } /* 結(jié)束狀態(tài),內(nèi)容向左滾動(dòng)完全消失 */ }
在上述代碼中,我們?cè)O(shè)置了一個(gè)名為"marquee"的@keyframes動(dòng)畫,通過(guò)transform屬性的translateX函數(shù)來(lái)實(shí)現(xiàn)內(nèi)容的橫向滾動(dòng)。將0%的初始狀態(tài)設(shè)置為水平偏移量為0%,將100%的結(jié)束狀態(tài)設(shè)置為水平偏移量為-100%(即向左滾動(dòng)到內(nèi)容完全消失),并將動(dòng)畫設(shè)置為持續(xù)10秒,線性運(yùn)動(dòng),并且無(wú)限循環(huán)。
步驟三:調(diào)整容器和內(nèi)容的顯示效果
最后,我們可以根據(jù)實(shí)際需求對(duì)容器和內(nèi)容的顯示效果進(jìn)行調(diào)整。例如,我們可以設(shè)置容器的背景顏色、邊框、邊距等,以便更好地與頁(yè)面的整體風(fēng)格匹配。同時(shí),我們還可以設(shè)置內(nèi)容的字體、顏色、字號(hào)等,以及添加一些CSS過(guò)渡效果來(lái)增加跑馬燈的流暢度。
.marquee-container { background-color: #f2f2f2; border: 1px solid #ccc; margin: 20px; } .marquee-content li { font-family: Arial, sans-serif; color: #333; font-size: 16px; padding: 10px; transition: color 0.3s ease-in-out; } .marquee-content li:hover { color: #ff0000; /* 鼠標(biāo)懸停時(shí)改變文字顏色 */ }
在上述代碼中,我們?cè)O(shè)置了容器的背景顏色為#f2f2f2,邊框?yàn)?px solid #ccc,并設(shè)置了20px的外邊距。同時(shí),我們?cè)O(shè)置了內(nèi)容的字體為Arial,顏色為#333,字號(hào)為16px,并為內(nèi)容設(shè)置了一個(gè)0.3秒的顏色過(guò)渡效果,使得在鼠標(biāo)懸停時(shí)文字顏色漸變?yōu)榧t色。
綜上所述,通過(guò)以上步驟,我們可以使用CSS來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的跑馬燈效果。當(dāng)然,根據(jù)實(shí)際需求,我們可以進(jìn)一步擴(kuò)展和優(yōu)化這個(gè)效果。希望以上的內(nèi)容對(duì)你有所幫助!
Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS einen Marquee-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

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)

Um die Textfarbe in CSS zu ?ndern, müssen Sie das Farbattribut verwenden. 1. Verwenden Sie das Farbattribut, um die Textvorderfarbe des Textes zu setzen und Farbnamen (z. B. rot), Hexadezimalcodes (wie #ff0000), RGB -Werte (wie RGB (255,0,0)), HSL -Werte (wie HSL (0,100%) und RGBA oder HSLA (0,100%) und RGBA oder HSLA mit Transparen (0,100%) und RGBA oder HSLA (0,100%) (255,0,0,0,0,0,0,0,0,0,0). 2. Sie k?nnen Farben auf jedes Element anwenden, das Text enth?lt, wie z. B. H1 auf H6 -Titel, Absatz P, Link A (beachten Sie die Farbeinstellungen verschiedener Zust?nde von A: Link, A: Besucht, a: hover, a: aktiv), Schaltfl?chen, Div, Span usw.; 3.. Die meisten

UseAtOMatedTools -LikepurgecsSoruncsStoscanandremoveUnusedCss; 2.IntegratepurgingIntoyourbuildProcessviawebpack, vite, ortailwind ’ScontentConfiguration; 3.AuditcsSuSageWithCromedevtoolSCoveragetabbeFeforenpurgingToAvoidReperingNeedstyles; 4. Safelistdynamic

In der Webentwicklung h?ngt die Auswahl der CSS -Einheiten von den Entwurfsanforderungen und der reaktionsschnellen Leistung ab. 1. Pixel (PX) werden verwendet, um Gr??en wie Grenzen und Ikonen zu reparieren, sind jedoch nicht für reaktionsschnelles Design f?rderlich. 2. Prozentsatz (%) wird gem?? dem übergeordneten Container angepasst, das zum Streaming -Layout geeignet ist, aber auf die Kontextabh?ngigkeit beachtet wird. 3.EM basiert auf der aktuellen Schriftgr??e. 4. Ansichtsfenster (VW/VH/VMIN/VMAX) werden gem?? der Bildschirmgr??e eingestellt, geeignet für Vollbild-Elemente und dynamische UI. 5. Auto-, Erben-, Anfangs- und andere Werte werden verwendet, um Stile automatisch zu berechnen, zu erben oder zurückzusetzen. Die rationale Verwendung dieser Einheiten kann die Flexibilit?t und Reaktionsf?higkeit der Seiten verbessern.

ASTACKINGCONTEXTISASELF-ContainedLayerincsSthatControlsThez-CorderoverlapPingElements, wonach contextSrestrictz-Indexintertions;

Backdrop-Filter wird verwendet, um visuelle Effekte auf den Inhalt der Elemente anzuwenden. 1. Verwenden Sie Backdrop-Filter: Blur (10px) und andere Syntax, um den frostierten Glasffekt zu erzielen. 2. unterstützt mehrere Filterfunktionen wie Unsch?rfe, Helligkeit, Kontrast usw. und kann überlagert werden. 3. Es wird h?ufig in der Glaskartendesign verwendet, und es ist notwendig, sicherzustellen, dass sich die Elemente mit dem Hintergrund überschneiden. 4. Moderne Browser haben eine gute Unterstützung, und @Supports k?nnen verwendet werden, um Downgrade -L?sungen bereitzustellen. 5. Vermeiden Sie überm??ige Unsch?rfewerte und h?ufiges Neuzuziehen, um die Leistung zu optimieren. Dieses Attribut wirkt sich nur aus, wenn sich hinter den Elementen Inhalte befinden.

Der Stil der Verbindung sollte verschiedene Zust?nde durch Pseudoklassen unterscheiden. 1. Verwenden Sie A: Link zum festgelegten Linkstil, 2. A: Besucht, um den zugegriffenen Link zu setzen, 3. A: HOOver, um den Schweberffekt festzulegen, 4. A: aktiv, um den Klick-Time-Stil festzulegen, 5. Sie k?nnen die Benutzerfreundlichkeit und Zug?nglichkeit verbessern, indem Sie Polster, Cursor: Zeiger und Fokusumrisse beibehalten oder anpassen. Sie k?nnen auch Border-Bottom- oder Animations-Unterstockungen verwenden, um sicherzustellen, dass der Link in allen Staaten eine gute Benutzererfahrung und -grafie hat.

Verwenden Sie Text-Align: Mitte, um eine horizontale Zentrierung von Text zu erreichen. 2. Verwenden Sie Flexbox's Align-Items: Center und Justify-Content: Center, um vertikale und horizontale Zentrierung zu erreichen. 3. Einleitender Text kann vertikal zentriert werden, indem die Linienh?he gleich der Beh?lterh?he festgelegt wird. 4. Absolute Positionierungselemente k?nnen mit oben kombiniert werden: 50%, links: 50%und Transformation: übersetzen (-50%, -50%), um Zentrierung zu erreichen; 5. CSSGrid's Place-Items: Das Zentrum kann auch gleichzeitig eine doppelte Achse erreichen. Es wird empfohlen, Flexbox oder Grid zuerst in modernen Layouts zu verwenden.

User Agent Stylesheets sind die Standard -CSS -Stile, die Browser automatisch gelten, um sicherzustellen, dass HTML -Elemente, die keine benutzerdefinierten Stile hinzugefügt haben, immer noch grundlegend lesbar sind. Sie beeinflussen das anf?ngliche Erscheinungsbild der Seite, es gibt jedoch Unterschiede zwischen Browsern, die zu einer inkonsistenten Anzeige führen k?nnen. Entwickler l?sen dieses Problem h?ufig durch Zurücksetzen oder Standardisierungsstile. Verwenden Sie das Computer- oder Stilfeld der Entwickler -Tools, um die Standardstile anzuzeigen. Zu den gemeinsamen Abdeckungsvorg?ngen geh?ren das L?schen innerer und ?u?erer Margen, ?nderungen von Link -Unterstrichen, die Anpassung der Titelgr??en und die Vereinigung der Schaltfl?chenstile. Das Verst?ndnis von User Agent-Stilen kann dazu beitragen, die konsistente Cross-Browser-Konsistenz zu verbessern und eine pr?zise Layout-Steuerung zu erm?glichen.
