Home > Article > Web Front-end > How to implement custom "W" shaped running trajectory in CSS3

How to implement custom "W" shaped running trajectory in CSS3

不言Original: 2018-06-26 14:40:424628browse

This article mainly introduces the CSS3 effect: "W" shaped running trajectory example. The running trajectory of w can be realized through CSS. It is of great practical value. Friends in need can refer to it.

Organize the documents and search out a CSS3 effect: the code of the "W" shaped running trajectory instance, sort it out and streamline it a little for sharing.

<!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>

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to vertically center an image of unknown height

The above is the detailed content of How to implement custom "W" shaped running trajectory in CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use CSS3 to achieve the flashing effect of text looping to the rightNext article：Use CSS3 to achieve the flashing effect of text looping to the right

See more

How to implement custom "W" shaped running trajectory in CSS3

Related articles