How to implement custom 'W' shaped running trajectory in CSS3-CSS Tutorial-php.cn

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

不言

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

Original

4643 people have browsed it

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>

Copy after login

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!