This article introduces the use of CSS3 animation to create special effects for Ferris wheel rotation. The code is very simple, so learn it quickly and send it to your children to see!
running result:
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrapper{
background: url(img/bg.jpg);
}
.box{
width:768px ;
margin: 0 auto;
animation:name 20s linear infinite ;
position: relative;
transform-origin: center;
}
@keyframes name{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
.box img:nth-of-type(2){
position: absolute;
top: 70px;
left:60px;
animation:name 20s linear infinite reverse;
}
.box img:nth-of-type(3){
position: absolute;
top: 70px;
right:60px;
animation:name 20s linear infinite reverse;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<img src="img/fsw.png" >
<img src="img/1.png" >
<img src="img/2.png" >
</div>
</div>
</body>
</html>
Picture material:
It's super simple, save it and try it out!
If you have any doubts, please leave a message or private message!