You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.
In this course, you'll build a Ferris wheel. You'll learn how to use CSS to animate elements, transform them, and adjust their speed.
Step 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ferris Wheel</title>
<link href="./styles.css" rel="stylesheet" />
</head>
<body></body>
</html>
Step 2
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div> </body>
Step 3
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
}
Step 4
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
position:absolute;
height:55vw;
width:55vw;
}
Step 5
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
position: absolute;
height: 55vw;
width: 55vw;
max-height:500px;
max-width:500px;
}
Step 6
.line {
background-color:black;
width:50%;
height:2px;
}
Step 7
.line {
background-color: black;
width: 50%;
height: 2px;
position:absolute;
left:50%;
top:50%;
}
Step 8
.line {
background-color: black;
width: 50%;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform-origin:0% 0%;
}
Step 9
.line:nth-of-type(2) {
transform:rotate(60deg);
}
Step 10
.line:nth-of-type(3) {
transform:rotate(120deg);
}
.line:nth-of-type(4) {
transform:rotate(180deg);
}
.line:nth-of-type(5) {
transform:rotate(240deg);
}
.line:nth-of-type(6){
transform:rotate(300deg);
}
Step 11
.cabin {
background-color:red;
width:20%;
height:20%;
}
Step 12
.cabin {
background-color: red;
width: 20%;
height: 20%;
position:absolute;
border: 2px solid;
}
Step 13
.cabin {
background-color: red;
width: 20%;
height: 20%;
position: absolute;
border: 2px solid;
transform-origin:50% 0%;
}
Step 14
.cabin:nth-of-type(1) {
right:-8.5%;
top:50%;
}
Step 15
.cabin:nth-of-type(2) {
right:17%;
top:93.5%;
}
.cabin:nth-of-type(3) {
right:67%;
top:93.5%;
}
.cabin:nth-of-type(4) {
left:-8.5%;
top:50%;
}
.cabin:nth-of-type(5) {
left:17%;
top:7%;
}
.cabin:nth-of-type(6) {
right:17%;
top:7%;
}
Step 16
@keyframes wheel { }
Step 17
@keyframes wheel {
0%{
}
}
Step 18
@keyframes wheel {
0% {
transform:rotate(0deg);
}
}
Step 19
@keyframes wheel {
0% {
transform: rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
Step 20
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
position: absolute;
height: 55vw;
width: 55vw;
max-width: 500px;
max-height: 500px;
animation-name:wheel;
animation-duration:10s;
}
Step 21
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
position: absolute;
height: 55vw;
width: 55vw;
max-width: 500px;
max-height: 500px;
animation-name: wheel;
animation-duration: 10s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
Step 22
@keyframes cabins {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
Step 23
.cabin {
background-color: red;
width: 20%;
height: 20%;
position: absolute;
border: 2px solid;
transform-origin: 50% 0%;
animation:cabins 10s linear infinite;
}
Step 24
.cabin {
background-color: red;
width: 20%;
height: 20%;
position: absolute;
border: 2px solid;
transform-origin: 50% 0%;
animation: cabins 10s ease-in-out infinite;
}
Step 25
@keyframes cabins {
0% {
transform: rotate(0deg);
background-color:yellow;
}
100% {
transform: rotate(-360deg);
}
}
Step 26
@keyframes cabins {
0% {
transform: rotate(0deg);
background-color: yellow;
}
50% {
background-color:purple;
}
100% {
transform: rotate(-360deg);
}
}
Step 27
@keyframes cabins {
0% {
transform: rotate(0deg);
}
50% {
background-color: purple;
}
100% {
transform: rotate(-360deg);
}
}
Step 28
@keyframes cabins {
0% {
transform: rotate(0deg);
}
25% {
background-color:yellow;
}
50% {
background-color: purple;
}
100% {
transform: rotate(-360deg);
}
}
Step 29