Inhaltsverzeichnis
Code-Interpretation
Heim Web-Frontend js-Tutorial Implementieren Sie Links- und Rechts-Swing-Anzeigen auf der Startseite

Implementieren Sie Links- und Rechts-Swing-Anzeigen auf der Startseite

May 24, 2018 pm 02:07 PM
实现 um

Dieses Mal werde ich Ihnen die Implementierung von links- und rechtsschwenkenden Anzeigen auf der Front-End-Seite vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung von links- und rechtsschwenkenden Anzeigen auf der Front-End-Seite? ein Blick.

Code-Interpretation

Dom definieren, der Container enthält eine Pinnwand, eine Schnur zum Aufhängen der Pinnwand und 3 Reißzwecken zum Befestigen des Seils:

<p class="signboard">
    <p class="sign">THANKS</p>
    <p class="strings"></p>
    <p class="pin top"></p>
    <p class="pin left"></p>
    <p class="pin right"></p>
</p>
Nach dem Login kopieren

Zentrierte Anzeige:

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center 60%, white, sandybrown);
}
Nach dem Login kopieren

Definieren Sie die Gesamtgröße der Pinnwand:

.signboard {
    width: 400px;
    height: 300px;
}
Nach dem Login kopieren

Legen Sie den Stil der Pinnwand fest:

.signboard {
    position: relative;
}
.sign {
    width: 100%;
    height: 200px;
    background: burlywood;
    border-radius: 15px;
    position: absolute;
    bottom: 0;
}
Nach dem Login kopieren

Legen Sie den Textstil mit Gravureffekt fest:

.sign {
    color: saddlebrown;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3),
                0 -2px 0 rgba(0, 0, 0, 0.7);
}
Nach dem Login kopieren

Zeichnen Sie die Schnur:

.strings {
    width: 150px;
    height: 150px;
    border: 5px solid brown;
    position: absolute;
    border-right: none;
    border-bottom: none;
    transform: rotate(45deg);
    top: 38px;
    left: 122px;
}
Nach dem Login kopieren

Zeichnen Sie die Reißnägel oben auf die Schnur:

.pin {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
}
.pin.top {
    background: gray;
    left: 187px;
}
Nach dem Login kopieren

Zeichnen Sie die Reißnägel auf die linke und rechte Seite des Bretts:

.pin.left,
.pin.right {
    background: brown;
    top: 110px;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}
.pin.left {
    left: 80px;
}
.pin.right {
    right: 80px;
}
Nach dem Login kopieren

Lassen Sie zum Schluss das Schild wackeln:
(Dies wurde gemäß dem Vorschlag von Xiao Leilei geändert, um den oberen Reißzwecken als Drehachse zu verwenden, was besser ist als der ursprüngliche Effekt)

.signboard {
    animation: swing 1.5s ease-in-out infinite alternate;
    transform-origin: 200px 13px;
}
@keyframes swing {
    from {
        transform: rotate(10deg);
    }
    to {
        transform: rotate(-10deg);
    }
}
Nach dem Login kopieren

Sie sind fertig !

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von Schnittstellen in JS

Detaillierte Erläuterung der hervorzuhebenden Schritte das ausgewählte Li in der React-Implementierung

Das obige ist der detaillierte Inhalt vonImplementieren Sie Links- und Rechts-Swing-Anzeigen auf der Startseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie man linke und rechte Ohrhörer unterscheidet rl Wie man linke und rechte Ohrhörer trägt Wie man linke und rechte Ohrhörer unterscheidet rl Wie man linke und rechte Ohrhörer trägt Feb 22, 2024 pm 05:10 PM

L steht für links, wird am linken Ohr getragen, und R steht für rechts, wird am rechten Ohr getragen. Analyse 1 Normalerweise befinden sich auf den Ohrhörern Logos, die mit L und R abgekürzt werden. L steht für links und wird am linken Ohr getragen. Die mit R und L gekennzeichneten spezifischen Positionen sind nicht festgelegt und basieren auf den jeweiligen Kopfhörern. Bei einigen Kopfhörern ist ein R rot markiert. Bei Kopfhörern, die mit einem Mobiltelefon geliefert werden, befindet sich die Seite mit Mikrofon und Tasten normalerweise auf der rechten Seite. Ergänzung: Arten von Kopfhörern 1 Kopfhörer sind ein Symbol für tragbares Audio der Menschen. Kopfhörer können in zwei Spezifikationen unterteilt werden: OMTP-Spezifikationen werden im Allgemeinen als nationale Standards bezeichnet, und CTIA werden im Allgemeinen als internationale Standards bezeichnet. Kopfhörer werden nach ihren Energieumwandlungsmethoden klassifiziert, insbesondere: dynamische Spulenmethode, Dreheisenmethode, statische Methode

Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Mar 24, 2024 am 11:27 AM

Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Mit dem Aufkommen der sozialen Medien ist WeChat zu einem unverzichtbaren Kommunikationsmittel im täglichen Leben der Menschen geworden. Viele Menschen können jedoch auf ein Problem stoßen: Sie können sich gleichzeitig auf demselben Mobiltelefon bei mehreren WeChat-Konten anmelden. Für Huawei-Mobiltelefonbenutzer ist es nicht schwierig, eine doppelte WeChat-Anmeldung zu erreichen. In diesem Artikel wird erläutert, wie eine doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen erreicht wird. Erstens bietet das EMUI-System, das mit Huawei-Mobiltelefonen geliefert wird, eine sehr praktische Funktion – das doppelte Öffnen von Anwendungen. Durch die doppelte Öffnungsfunktion der Anwendung können Benutzer gleichzeitig

Verwenden Sie Java, um Code zur Implementierung von Liebesanimationen zu schreiben Verwenden Sie Java, um Code zur Implementierung von Liebesanimationen zu schreiben Dec 23, 2023 pm 12:09 PM

Liebesanimationseffekte durch Java-Code realisieren Im Bereich der Programmierung sind Animationseffekte sehr verbreitet und beliebt. Mit Java-Code können verschiedene Animationseffekte erzielt werden, darunter der Herzanimationseffekt. In diesem Artikel wird erläutert, wie Sie mithilfe von Java-Code diesen Effekt erzielen, und es werden spezifische Codebeispiele aufgeführt. Der Schlüssel zum Realisieren des Herzanimationseffekts besteht darin, das herzförmige Muster zu zeichnen und den Animationseffekt durch Ändern der Position und Farbe der Herzform zu erzielen. Hier ist der Code für ein einfaches Beispiel: importjavax.swing.

So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mar 24, 2024 pm 06:03 PM

So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mit der Popularität sozialer Software und der zunehmenden Bedeutung von Datenschutz und Sicherheit rückt die WeChat-Klonfunktion allmählich in den Mittelpunkt der Aufmerksamkeit der Menschen. Die WeChat-Klonfunktion kann Benutzern helfen, sich gleichzeitig bei mehreren WeChat-Konten auf demselben Mobiltelefon anzumelden, was die Verwaltung und Nutzung erleichtert. Es ist nicht schwierig, die WeChat-Klonfunktion auf Huawei-Mobiltelefonen zu implementieren. Sie müssen lediglich die folgenden Schritte ausführen. Schritt 1: Stellen Sie sicher, dass die Version Ihres Mobiltelefonsystems und die WeChat-Version den Anforderungen entsprechen. Stellen Sie zunächst sicher, dass die Version Ihres Huawei-Mobiltelefonsystems sowie die WeChat-App auf die neueste Version aktualisiert wurden.

PHP-Programmierhandbuch: Methoden zur Implementierung der Fibonacci-Folge PHP-Programmierhandbuch: Methoden zur Implementierung der Fibonacci-Folge Mar 20, 2024 pm 04:54 PM

Die Programmiersprache PHP ist ein leistungsstarkes Werkzeug für die Webentwicklung, das eine Vielzahl unterschiedlicher Programmierlogiken und Algorithmen unterstützen kann. Unter diesen ist die Implementierung der Fibonacci-Folge ein häufiges und klassisches Programmierproblem. In diesem Artikel stellen wir vor, wie Sie die Fibonacci-Folge mit der Programmiersprache PHP implementieren, und fügen spezifische Codebeispiele bei. Die Fibonacci-Folge ist eine mathematische Folge, die wie folgt definiert ist: Das erste und das zweite Element der Folge sind 1, und ab dem dritten Element ist der Wert jedes Elements gleich der Summe der beiden vorherigen Elemente. Die ersten paar Elemente der Sequenz

Entwicklungsvorschläge: So verwenden Sie das ThinkPHP-Framework zur Implementierung asynchroner Aufgaben Entwicklungsvorschläge: So verwenden Sie das ThinkPHP-Framework zur Implementierung asynchroner Aufgaben Nov 22, 2023 pm 12:01 PM

„Entwicklungsvorschläge: So verwenden Sie das ThinkPHP-Framework zur Implementierung asynchroner Aufgaben“ Mit der rasanten Entwicklung der Internettechnologie stellen Webanwendungen immer höhere Anforderungen an die Verarbeitung einer großen Anzahl gleichzeitiger Anforderungen und komplexer Geschäftslogik. Um die Systemleistung und das Benutzererlebnis zu verbessern, erwägen Entwickler häufig die Verwendung asynchroner Aufgaben, um einige zeitaufwändige Vorgänge auszuführen, z. B. das Senden von E-Mails, das Verarbeiten von Datei-Uploads, das Erstellen von Berichten usw. Im Bereich PHP bietet das ThinkPHP-Framework als beliebtes Entwicklungsframework einige praktische Möglichkeiten zur Implementierung asynchroner Aufgaben.

Meistern Sie, wie Golang Möglichkeiten für die Spieleentwicklung eröffnet Meistern Sie, wie Golang Möglichkeiten für die Spieleentwicklung eröffnet Mar 16, 2024 pm 12:57 PM

Im heutigen Bereich der Softwareentwicklung wird Golang (Go-Sprache) als effiziente, prägnante und hochgradig parallele Programmiersprache von Entwicklern zunehmend bevorzugt. Seine umfangreiche Standardbibliothek und die effizienten Parallelitätsfunktionen machen es zu einer hochkarätigen Wahl im Bereich der Spieleentwicklung. In diesem Artikel wird untersucht, wie man Golang für die Spieleentwicklung verwendet, und seine leistungsstarken Möglichkeiten anhand spezifischer Codebeispiele demonstriert. 1. Golangs Vorteile bei der Spieleentwicklung: Als statisch typisierte Sprache wird Golang beim Aufbau großer Spielsysteme verwendet.

Implementierungshandbuch für PHP-Spielanforderungen Implementierungshandbuch für PHP-Spielanforderungen Mar 11, 2024 am 08:45 AM

Implementierungsleitfaden für PHP-Spielanforderungen Mit der Popularität und Entwicklung des Internets erfreut sich der Markt für Webspiele immer größerer Beliebtheit. Viele Entwickler hoffen, die PHP-Sprache zur Entwicklung ihrer eigenen Webspiele nutzen zu können, und die Umsetzung der Spielanforderungen ist ein wichtiger Schritt. In diesem Artikel wird erläutert, wie Sie mithilfe der PHP-Sprache allgemeine Spielanforderungen implementieren und spezifische Codebeispiele bereitstellen. 1. Spielfiguren erstellen In Webspielen sind Spielfiguren ein sehr wichtiges Element. Wir müssen die Attribute des Spielcharakters wie Name, Level, Erfahrungswert usw. definieren und Methoden für deren Bedienung bereitstellen

See all articles