So implementieren Sie eine benutzerdefinierte „W'-förmige Laufbahn in CSS3-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-06-26 14:40:42

Original

4711 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!