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:424647browse
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!