Comment implémenter une trajectoire de course personnalisée en forme de 'W' en CSS3-tutoriel CSS-php.cn

Comment implémenter une trajectoire de course personnalisée en forme de 'W' en CSS3

不言

Libérer： 2018-06-26 14:40:42

original

4659 Les gens l'ont consulté

Cet article présente principalement l'effet CSS3 : exemple de trajectoire de course en forme de "W". La trajectoire de course de w peut être réalisée via CSS. Elle est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer.

Organisez les documents et recherchez un effet CSS3 : le code de l'exemple de trajectoire de course en forme de "W", je vais le trier et le rationaliser un peu pour le partager.

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

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment centrer verticalement une image de hauteur inconnue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!