Heim > Artikel > Web-Frontend > CSS3-Implementierung eines benutzerdefinierten „W“-förmigen Laufbahneffekt-Beispiels

CSS3-Implementierung eines benutzerdefinierten „W“-förmigen Laufbahneffekt-Beispiels

高洛峰Original: 2017-03-31 10:16:272324Durchsuche

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 ein wenig sortieren und rationalisieren und ihn teilen.

<!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 detaillierte Inhalt vonCSS3-Implementierung eines benutzerdefinierten „W“-förmigen Laufbahneffekt-Beispiels. 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：So verwenden Sie CSS für das WebseitenlayoutNächster Artikel：So verwenden Sie CSS für das Webseitenlayout

In Verbindung stehende Artikel

Mehr sehen