Maison >interface Web >tutoriel CSS >Comment implémenter une trajectoire de course personnalisée en forme de 'W' en CSS3
Comment implémenter une trajectoire de course personnalisée en forme de 'W' en CSS3
- 不言original
- 2018-06-26 14:40:424701parcourir
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>
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!