Heim > Artikel > Web-Frontend > So implementieren Sie eine benutzerdefinierte „W“-förmige Laufbahn in CSS3

So implementieren Sie eine benutzerdefinierte „W“-förmige Laufbahn in CSS3

不言Original: 2018-06-26 14:40:424629Durchsuche

In diesem Artikel wird hauptsächlich der CSS3-Effekt vorgestellt: Beispiel für eine „W“-förmige Laufbahn. Freunde in Not können sich darauf beziehen.

Organisieren Sie die Dokumente und suchen Sie nach einem CSS3-Effekt: dem Code des Beispiels für die „W“-förmige Laufbahn. Ich werde ihn zum Teilen ein wenig sortieren und optimieren.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        #p{
            width:900px;
            height:400px;
            border:2px solid black;
            margin: 100px auto;
        }
        #span{
            float:left;
            display: block;
            font-size: 100px;
            width: 100px;
            height: 100px;
            line-height: 80px;
            text-align: center;
            border-radius: 50%;
            background: radial-gradient(blue,green);
            animation: move 4s ease 0s infinite alternate;
        }
        @keyframes move {
            0%{
                transform: translate(0px,0px);
            }
            25%{
                transform: translate(200px,300px);
            }
            50%{
                transform: translate(400px,0px);
            }
            75%{
                transform: translate(600px,300px);
            }
            100%{
                transform: translate(800px,0px);
            }
        }
    </style>
</head>
<body>
<p id="p">
    <span id="span">w</span>
</p>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So zentrieren Sie ein Bild unbekannter Höhe vertikal

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine benutzerdefinierte „W“-förmige Laufbahn in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Verwenden Sie CSS3, um den blinkenden Effekt einer Textschleife nach rechts zu erzielenNächster Artikel：Verwenden Sie CSS3, um den blinkenden Effekt einer Textschleife nach rechts zu erzielen

In Verbindung stehende Artikel

Mehr sehen