Introduction:
Welcome, fellow coders! In this tutorial, we’ll dive into the exciting world of web animations by creating a captivating UFO and alien scene using HTML and CSS. Get ready to bring your web projects to life with this step-by-step guide.
Things You Will Learn:
- How to structure your project folder for a clean and organized codebase.
- Creating a visually appealing UFO using CSS gradients and keyframe animations.
- Designing an adorable alien character with various CSS properties.
- Implementing media queries for a responsive design that adapts to different screen sizes.
Video Tutorial:
I would suggest you to watch the video below for a better understanding on how we have implemented the functionality of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder as – ”Responsive Alien Animation”. Within this folder we have 2 files. These files are:
- index.html
- style.css
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Alien Animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="ufo">
<div class="alien">
<div class="mouth"></div>
<div class="details"></div>
</div>
</div>
</div>
</body>
</html>
Â
CSS:
Next, we style our code using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #5c1f8c;
}
.container {
height: 31.25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.ufo {
height: 16.87em;
width: 11.25em;
background: linear-gradient(to bottom, #e6e3f5 90%, #ede544 90%);
border-radius: 11.25em 11.25em 0 0;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 40%;
animation: float 3s infinite;
}
@keyframes float {
50% {
top: calc(40% + 3.12em);
}
}
.ufo:before {
position: absolute;
content: "";
width: 11.25em;
height: 5.62em;
background-color: #eebb22;
border-radius: 0 0 5.62em 5.62em;
bottom: -5.62em;
}
.ufo:after {
position: absolute;
content: "";
height: 1.25em;
width: 7.5em;
border: 0.62em solid #eebb22;
border-radius: 7.5em 7.5em 0 0;
left: 1.25em;
border-bottom: none;
top: 20.62em;
}
.alien {
position: absolute;
height: 11.25em;
width: 8.75em;
background-color: #40bf60;
left: 1.25em;
top: 3.93em;
border-radius: 8.75em 8.75em 0 0;
}
.alien:before {
content: "";
position: absolute;
height: 5.62em;
width: 5.62em;
background-color: #ffffff;
border-radius: 50%;
left: 1.56em;
top: 1.87em;
}
.alien:after {
position: absolute;
content: "";
height: 1.25em;
width: 2.5em;
border: 0.5em solid #000000;
border-bottom: transparent;
border-radius: 3.75em 3.75em 0 0;
left: 2.5em;
top: 3.12em;
}
.mouth {
position: absolute;
height: 1.25em;
width: 2.5em;
background-color: #118c58;
border-radius: 0.31em 0.31em 2.5em 2.5em;
left: 3.12em;
top: 8.75em;
}
.details,
.details:before {
height: 1.56em;
width: 3.12em;
border: 0.5em solid #40bf60;
border-bottom: none;
border-radius: 3.12em 3.12em 0 0;
}
.details {
transform: rotate(65deg);
}
.details:before {
position: absolute;
content: "";
transform: rotate(-130deg);
left: 1.87em;
bottom: 4.68em;
}
.details:after {
content: "";
position: absolute;
height: 1.25em;
width: 1.25em;
background-color: #40bf60;
border-radius: 50%;
bottom: -0.62em;
left: -0.93em;
box-shadow: 3.75em -7.5em #40bf60;
}
@media screen and (min-width: 700px) {
.container {
font-size: 20px;
}
}
Â
Conclusion:
Congratulations! You’ve just created a whimsical UFO and alien animation using HTML and CSS. Feel free to customize and expand upon this project, adding more elements and refining the animation. Don’t forget to share your creations with the community and stay tuned for more exciting coding adventures. Happy coding!
