CREATE ANIMATED FRUITS SLICE USING CSS keyframes
In this article, I’ll explain how to make pretty fruit slices like the ones you saw in the above video. And the cool part is, we’ll only use simple HTML and CSS to do it.
I’m confident that this will improve your coding abilities. Specifically, I’ve used keyframes to add animation to make it look like the fruits are being sliced, just like you saw in the above video.
Below is the brief explanation of this project:
HTML Structure:
- There’s a container div with the class “fruits” that holds the entire object.
- Inside this container, there are multiple div elements with different classes (“cut-1,” “seed1,” etc.), each representing a specific part of the object.
<div class="fruits">
<div class="cut-1"></div>
<div class="seed1"></div>
<div class="seed2"></div>
<div class="seed3"></div>
<div class="seed4"></div>
<div class="seed5"></div>
<div class="cut-2"></div>
</div>CSS Variables (Custom Properties):
- Custom properties (CSS variables) are used to define reusable values for colors. This enhances maintainability, as changing a color value can be done in one place (the
:rootselector) and will affect all elements using that variable.
:root {
--bg: #004754;
--green: #009900;
--red: #e70001;
--seeds: #420200;
}
body {
background-color: var(--bg);
}
Positioning and Layout:
- The code uses absolute positioning and the
margin:autotechnique to center the “fruits” div both horizontally and vertically.
.fruits {
position: absolute;
height: 500px;
width: 500px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}Transformations and Animations:
- Transformations (e.g.,
rotate,border-radius) are applied to create visually interesting effects. - An animation (
@keyframes) is used to create a slicing effect (cut-2div) with smooth movement.
.cut-2 {
position: absolute;
height: 100px;
width: 200px;
left: 30%;
top: 40%;
border-radius: 50%;
transform: rotate(-130deg);
background-color: var(--green);
animation: slice 5s ease-in-out infinite;
@keyframes slice {
from {
left: 30%;
top: 40%;
}
to {
left: 45%;
top: 50%;
}
}Pseudo-elements (:after):
- Pseudo-elements are used to create additional visual effects. For example,
:afteris used to create a triangular shape incut-1andcut-2.
.cut-1:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: -15%;
border-bottom: 60px solid var(--green);
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.cut-2:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: -15%;
border-bottom: 60px solid var(--green);
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}Responsive Design:
- Although the dimensions are fixed, the code shows a centered layout that could easily adapt to different screen sizes.
Follow these steps to do the project yourself:
- Make a new folder for your project and give a project suitable name.
- Inside that folder, create a file called “fruits.html“.
- Also inside the folder, create a file called “fruits.css“.
Now, copy the following HTML code into your “fruits.html” file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slice fruits | Only using HTML & CSS</title>
<link rel="stylesheet" href="fruits.css">
</head>
<body>
<div class="fruits">
<div class="cut-1"></div>
<div class="seed1"></div>
<div class="seed2"></div>
<div class="seed3"></div>
<div class="seed4"></div>
<div class="seed5"></div>
<div class="cut-2"></div>
</div>
</body>
</html>Copy the following CSS code into your “fruits.css” file.
:root {
--bg: #004754;
--green: #009900;
--red: #e70001;
--seeds: #420200;
}
body {
background-color: var(--bg);
}
.fruits {
position: absolute;
height: 500px;
width: 500px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.cut-1 {
position: absolute;
height: 100px;
width: 200px;
left: 30%;
top: 40%;
border-radius: 50%;
transform: rotate(45deg);
background-color: var(--red);
}
.cut-1:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: -15%;
border-bottom: 60px solid var(--green);
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.seed1, .seed2, .seed3, .seed4, .seed5 {
height: 10px;
width: 10px;
border-bottom-right-radius: 100px;
border-top-left-radius: 100px;
background-color: var(--seeds);
}
.seed1 {
position: absolute;
left: 45%;
top: 40%;
}
.seed2 {
position: absolute;
left: 50%;
top: 40%;
}
.seed3 {
position: absolute;
left: 45%;
top: 45%;
}
.seed4 {
position: absolute;
left: 40%;
top: 35%;
}
.seed5 {
position: absolute;
left: 40%;
top: 45%;
}
.cut-2 {
position: absolute;
height: 100px;
width: 200px;
left: 30%;
top: 40%;
border-radius: 50%;
transform: rotate(-130deg);
background-color: var(--green);
animation: slice 5s ease-in-out infinite;
}
.cut-2:after{
content: "";
position: absolute;
height: 100%;
width: 100%;
top: -15%;
border-bottom: 60px solid var(--green);
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
@keyframes slice {
from {
left: 30%;
top: 40%;
}
to {
left: 45%;
top: 50%;
}
}Open the “fruits.html” file in your web browser. You should see what was shown in the video. Great job, you did it! Now, if you want, you can change the color or style to practice more.
CONCLUSION
In summary, the code uses HTML and CSS to visually represent a stylized object with specific shapes, colors, and animations. The object has two distinct cuts or slices, and seeds are positioned around it. The use of CSS variables and animations enhances the visual appeal of the object.
By working with and understanding this code, a web developer can improve skills in HTML and CSS, as well as gain insights into creative styling and animations. Additionally, this example could serve as a foundation for further exploration into more advanced topics like SVG animations or JavaScript interactions.
