Hello friends. In today’s tutorial, I will teach you how to create a ‘Popsicle animation’. All you need is HTML and CSS, to create this project. This a beginner-friendly project. If you are looking for more complicated projects you can check out the playlist here.
Video Tutorial:
Hello friends. In today’s tutorial, I will teach you how to create a ‘Popsicle animation’. All you need is HTML and CSS, to create this project. This a beginner-friendly project. If you are looking for more complicated projects you can check out the playlist here.
Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here. If you like video tutorials like this subscribe to my YouTube channel, where I post new projects based on HTML, CSS, and Javascript regularly.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Popsicle Animation’. Inside this folder, we have two files. These files are index.html and style.css.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file. We simply create a div here and later style it using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popsicle Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="popsicle"></div>
</body>
</html>
CSS:
Next, we style our button using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
We begin by setting the margin, padding, and box-sizing properties for all elements. Then, we set the background color of the body.
The main popsicle shape is defined with the class “popsicle”. We set a fixed height, width, and position it in the center of the screen. We use the border-radius property to create rounded corners on the top, and we use a gradient background that repeats linearly. The gradient includes four colors.
Then we use the “before” and “after” pseudo-elements to create the remaining parts of our popsicle. The “before” element is for creating the white stick and the “after” element is for creating the shadow of our popsicle. Finally, we set the animation for the “.popsicle” class called “move” which changes the background position of the gradient every 15 seconds, making it appear to move.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #220572;
}
.popsicle {
height: 18.75em;
width: 13.75em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: calc(50% - 3.25em);
border-radius: 7.5em 7.5em 0.9em 0.9em;
background: repeating-linear-gradient(
-30deg,
#ec3893 0,
#ec3893 5em,
#e9ca00 5em,
#e9ca00 10em,
#6cc258 10em,
#6cc258 15em,
#2ed3ec 15em,
#2ed3ec 20em
);
background-size: 375em;
animation: move 15s infinite linear;
}
@keyframes move {
100% {
background-position: -312.5em;
}
}
.popsicle:before {
position: absolute;
content: "";
height: 12.5em;
width: 1.25em;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 1.25em;
top: 5em;
left: 1.25em;
}
.popsicle:after {
position: absolute;
content: "";
height: 7.5em;
width: 3.12em;
background: linear-gradient(#975d39 1.25em, #d7965b 1.25em);
left: 5.12em;
top: 18.75em;
border-radius: 0 0 1.87em 1.87em;
}
@media screen and (min-width: 600px) {
.popsicle {
font-size: 1.2em;
}
}
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Now all you have to do is extract the files from the zipped folder.
