Connect with us!
Mario Mystery Box Animation using HTML and CSS tutorial for beginners using VSCode
Mario is the retro game which is enjoyed by almost everyone at the childhood. One of the major power up assert is mystery box. Have you ever wondered how to create them using CSS and use it in our website? In this tutorial we will be looking into Mario Mystery Box with shaking Animation.
In this article we will see how to create Mario Mystery Box with shaking animation using CSS.
The most important properties that we use to create the Mario Mystery Box with shaking Animation are:
The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
Table of Contents
Mario Mystery Box Code Block
Here is the CSS class for implementing it.
.mystery-box {
width: 5px;
height: 5px;
box-shadow: 0px 0px 0px transparent, 90px 5px #a52a2a, 95px 5px #a52a2a,
100px 5px #a52a2a, 105px 5px #a52a2a, 110px 5px #a52a2a, 115px 5px #a52a2a,
120px 5px #a52a2a, 125px 5px #a52a2a, 130px 5px #a52a2a, 135px 5px #a52a2a,
140px 5px #a52a2a, 145px 5px #a52a2a, 150px 5px #a52a2a, 155px 5px #a52a2a,
85px 10px #a52a2a, 90px 10px #ffa500, 95px 10px #ffa500, 100px 10px #ffa500,
105px 10px #ffa500, 110px 10px #ffa500, 115px 10px #ffa500,
120px 10px #ffa500, 125px 10px #ffa500, 130px 10px #ffa500,
135px 10px #ffa500, 140px 10px #ffa500, 145px 10px #ffa500,
150px 10px #ffa500, 155px 10px #ffa500, 160px 10px #000, 85px 15px #a52a2a,
90px 15px #ffa500, 95px 15px #000, 100px 15px #ffa500, 105px 15px #ffa500,
110px 15px #ffa500, 115px 15px #ffa500, 120px 15px #ffa500,
125px 15px #ffa500, 130px 15px #ffa500, 135px 15px #ffa500,
140px 15px #ffa500, 145px 15px #ffa500, 150px 15px #000, 155px 15px #ffa500,
160px 15px #000, 85px 20px #a52a2a, 90px 20px #ffa500, 95px 20px #ffa500,
100px 20px #ffa500, 105px 20px #ffa500, 110px 20px #a52a2a,
115px 20px #a52a2a, 120px 20px #a52a2a, 125px 20px #a52a2a,
130px 20px #a52a2a, 135px 20px #ffa500, 140px 20px #ffa500,
145px 20px #ffa500, 150px 20px #ffa500, 155px 20px #ffa500, 160px 20px #000,
85px 25px #a52a2a, 90px 25px #ffa500, 95px 25px #ffa500, 100px 25px #ffa500,
105px 25px #a52a2a, 110px 25px #a52a2a, 115px 25px #000, 120px 25px #000,
125px 25px #000, 130px 25px #a52a2a, 135px 25px #a52a2a, 140px 25px #ffa500,
145px 25px #ffa500, 150px 25px #ffa500, 155px 25px #ffa500, 160px 25px #000,
85px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #ffa500, 100px 30px #ffa500,
105px 30px #a52a2a, 110px 30px #a52a2a, 115px 30px #000, 120px 30px #ffa500,
125px 30px #ffa500, 130px 30px #a52a2a, 135px 30px #a52a2a, 140px 30px #000,
145px 30px #ffa500, 150px 30px #ffa500, 155px 30px #ffa500, 160px 30px #000,
85px 35px #a52a2a, 90px 35px #ffa500, 95px 35px #ffa500, 100px 35px #ffa500,
105px 35px #ffa500, 110px 35px #000, 115px 35px #000, 120px 35px #ffa500,
125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a, 140px 35px #000,
145px 35px #ffa500, 150px 35px #ffa500, 155px 35px #ffa500, 160px 35px #000,
85px 40px #a52a2a, 90px 40px #ffa500, 95px 40px #ffa500, 100px 40px #ffa500,
105px 40px #ffa500, 110px 40px #ffa500, 115px 40px #ffa500,
120px 40px #a52a2a, 125px 40px #a52a2a, 130px 40px #000, 135px 40px #000,
140px 40px #000, 145px 40px #ffa500, 150px 40px #ffa500, 155px 40px #ffa500,
160px 40px #000, 85px 45px #a52a2a, 90px 45px #ffa500, 95px 45px #ffa500,
100px 45px #ffa500, 105px 45px #ffa500, 110px 45px #ffa500,
115px 45px #ffa500, 120px 45px #a52a2a, 125px 45px #a52a2a, 130px 45px #000,
135px 45px #ffa500, 140px 45px #ffa500, 145px 45px #ffa500,
150px 45px #ffa500, 155px 45px #ffa500, 160px 45px #000, 85px 50px #a52a2a,
90px 50px #ffa500, 95px 50px #ffa500, 100px 50px #ffa500, 105px 50px #ffa500,
110px 50px #ffa500, 115px 50px #ffa500, 120px 50px #ffa500, 125px 50px #000,
130px 50px #000, 135px 50px #ffa500, 140px 50px #ffa500, 145px 50px #ffa500,
150px 50px #ffa500, 155px 50px #ffa500, 160px 50px #000, 85px 55px #a52a2a,
90px 55px #ffa500, 95px 55px #ffa500, 100px 55px #ffa500, 105px 55px #ffa500,
110px 55px #ffa500, 115px 55px #ffa500, 120px 55px #a52a2a,
125px 55px #a52a2a, 130px 55px #ffa500, 135px 55px #ffa500,
140px 55px #ffa500, 145px 55px #ffa500, 150px 55px #ffa500,
155px 55px #ffa500, 160px 55px #000, 85px 60px #a52a2a, 90px 60px #ffa500,
95px 60px #ffa500, 100px 60px #ffa500, 105px 60px #ffa500,
110px 60px #ffa500, 115px 60px #ffa500, 120px 60px #a52a2a,
125px 60px #a52a2a, 130px 60px #000, 135px 60px #ffa500, 140px 60px #ffa500,
145px 60px #ffa500, 150px 60px #ffa500, 155px 60px #ffa500, 160px 60px #000,
85px 65px #a52a2a, 90px 65px #ffa500, 95px 65px #000, 100px 65px #ffa500,
105px 65px #ffa500, 110px 65px #ffa500, 115px 65px #ffa500,
120px 65px #ffa500, 125px 65px #000, 130px 65px #000, 135px 65px #ffa500,
140px 65px #ffa500, 145px 65px #ffa500, 150px 65px #000, 155px 65px #ffa500,
160px 65px #000, 85px 70px #a52a2a, 90px 70px #ffa500, 95px 70px #ffa500,
100px 70px #ffa500, 105px 70px #ffa500, 110px 70px #ffa500,
115px 70px #ffa500, 120px 70px #ffa500, 125px 70px #ffa500,
130px 70px #ffa500, 135px 70px #ffa500, 140px 70px #ffa500,
145px 70px #ffa500, 150px 70px #ffa500, 155px 70px #ffa500, 160px 70px #000,
85px 75px #000, 90px 75px #000, 95px 75px #000, 100px 75px #000,
105px 75px #000, 110px 75px #000, 115px 75px #000, 120px 75px #000,
125px 75px #000, 130px 75px #000, 135px 75px #000, 140px 75px #000,
145px 75px #000, 150px 75px #000, 155px 75px #000, 160px 75px #000;
}Yay! We have created the initial Mario Mystery Box.
Here is the output:
Mario Mystery Box CSS Animation
shaking animation is achieved by moving the object along the y axis.
Following are the classes used for animation.
The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Here is the CSS animation class implementing CSS.
@keyframes jump {
0%,
100% {
transform: translateY(20px);
}
50% {
transform: translateY(30px);
}
}The following way is to declare the animation inside the class block.
.mystery-box {
width: 5px;
height: 5px;
box-shadow: 0px 0px 0px transparent, 90px 5px #a52a2a, 95px 5px #a52a2a,
100px 5px #a52a2a, 105px 5px #a52a2a, 110px 5px #a52a2a,
115px 5px #a52a2a, 120px 5px #a52a2a, 125px 5px #a52a2a,
130px 5px #a52a2a, 135px 5px #a52a2a, 140px 5px #a52a2a,
145px 5px #a52a2a, 150px 5px #a52a2a, 155px 5px #a52a2a,
85px 10px #a52a2a, 90px 10px #ffa500, 95px 10px #ffa500,
100px 10px #ffa500, 105px 10px #ffa500, 110px 10px #ffa500,
115px 10px #ffa500, 120px 10px #ffa500, 125px 10px #ffa500,
130px 10px #ffa500, 135px 10px #ffa500, 140px 10px #ffa500,
145px 10px #ffa500, 150px 10px #ffa500, 155px 10px #ffa500,
160px 10px #000, 85px 15px #a52a2a, 90px 15px #ffa500, 95px 15px #000,
100px 15px #ffa500, 105px 15px #ffa500, 110px 15px #ffa500,
115px 15px #ffa500, 120px 15px #ffa500, 125px 15px #ffa500,
130px 15px #ffa500, 135px 15px #ffa500, 140px 15px #ffa500,
145px 15px #ffa500, 150px 15px #000, 155px 15px #ffa500,
160px 15px #000, 85px 20px #a52a2a, 90px 20px #ffa500,
95px 20px #ffa500, 100px 20px #ffa500, 105px 20px #ffa500,
110px 20px #a52a2a, 115px 20px #a52a2a, 120px 20px #a52a2a,
125px 20px #a52a2a, 130px 20px #a52a2a, 135px 20px #ffa500,
140px 20px #ffa500, 145px 20px #ffa500, 150px 20px #ffa500,
155px 20px #ffa500, 160px 20px #000, 85px 25px #a52a2a,
90px 25px #ffa500, 95px 25px #ffa500, 100px 25px #ffa500,
105px 25px #a52a2a, 110px 25px #a52a2a, 115px 25px #000,
120px 25px #000, 125px 25px #000, 130px 25px #a52a2a,
135px 25px #a52a2a, 140px 25px #ffa500, 145px 25px #ffa500,
150px 25px #ffa500, 155px 25px #ffa500, 160px 25px #000,
85px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #ffa500,
100px 30px #ffa500, 105px 30px #a52a2a, 110px 30px #a52a2a,
115px 30px #000, 120px 30px #ffa500, 125px 30px #ffa500,
130px 30px #a52a2a, 135px 30px #a52a2a, 140px 30px #000,
145px 30px #ffa500, 150px 30px #ffa500, 155px 30px #ffa500,
160px 30px #000, 85px 35px #a52a2a, 90px 35px #ffa500,
95px 35px #ffa500, 100px 35px #ffa500, 105px 35px #ffa500,
110px 35px #000, 115px 35px #000, 120px 35px #ffa500,
125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a,
140px 35px #000, 145px 35px #ffa500, 150px 35px #ffa500,
155px 35px #ffa500, 160px 35px #000, 85px 40px #a52a2a,
90px 40px #ffa500, 95px 40px #ffa500, 100px 40px #ffa500,
105px 40px #ffa500, 110px 40px #ffa500, 115px 40px #ffa500,
120px 40px #a52a2a, 125px 40px #a52a2a, 130px 40px #000,
135px 40px #000, 140px 40px #000, 145px 40px #ffa500,
150px 40px #ffa500, 155px 40px #ffa500, 160px 40px #000,
85px 45px #a52a2a, 90px 45px #ffa500, 95px 45px #ffa500,
100px 45px #ffa500, 105px 45px #ffa500, 110px 45px #ffa500,
115px 45px #ffa500, 120px 45px #a52a2a, 125px 45px #a52a2a,
130px 45px #000, 135px 45px #ffa500, 140px 45px #ffa500,
145px 45px #ffa500, 150px 45px #ffa500, 155px 45px #ffa500,
160px 45px #000, 85px 50px #a52a2a, 90px 50px #ffa500,
95px 50px #ffa500, 100px 50px #ffa500, 105px 50px #ffa500,
110px 50px #ffa500, 115px 50px #ffa500, 120px 50px #ffa500,
125px 50px #000, 130px 50px #000, 135px 50px #ffa500,
140px 50px #ffa500, 145px 50px #ffa500, 150px 50px #ffa500,
155px 50px #ffa500, 160px 50px #000, 85px 55px #a52a2a,
90px 55px #ffa500, 95px 55px #ffa500, 100px 55px #ffa500,
105px 55px #ffa500, 110px 55px #ffa500, 115px 55px #ffa500,
120px 55px #a52a2a, 125px 55px #a52a2a, 130px 55px #ffa500,
135px 55px #ffa500, 140px 55px #ffa500, 145px 55px #ffa500,
150px 55px #ffa500, 155px 55px #ffa500, 160px 55px #000,
85px 60px #a52a2a, 90px 60px #ffa500, 95px 60px #ffa500,
100px 60px #ffa500, 105px 60px #ffa500, 110px 60px #ffa500,
115px 60px #ffa500, 120px 60px #a52a2a, 125px 60px #a52a2a,
130px 60px #000, 135px 60px #ffa500, 140px 60px #ffa500,
145px 60px #ffa500, 150px 60px #ffa500, 155px 60px #ffa500,
160px 60px #000, 85px 65px #a52a2a, 90px 65px #ffa500, 95px 65px #000,
100px 65px #ffa500, 105px 65px #ffa500, 110px 65px #ffa500,
115px 65px #ffa500, 120px 65px #ffa500, 125px 65px #000,
130px 65px #000, 135px 65px #ffa500, 140px 65px #ffa500,
145px 65px #ffa500, 150px 65px #000, 155px 65px #ffa500,
160px 65px #000, 85px 70px #a52a2a, 90px 70px #ffa500,
95px 70px #ffa500, 100px 70px #ffa500, 105px 70px #ffa500,
110px 70px #ffa500, 115px 70px #ffa500, 120px 70px #ffa500,
125px 70px #ffa500, 130px 70px #ffa500, 135px 70px #ffa500,
140px 70px #ffa500, 145px 70px #ffa500, 150px 70px #ffa500,
155px 70px #ffa500, 160px 70px #000, 85px 75px #000, 90px 75px #000,
95px 75px #000, 100px 75px #000, 105px 75px #000, 110px 75px #000,
115px 75px #000, 120px 75px #000, 125px 75px #000, 130px 75px #000,
135px 75px #000, 140px 75px #000, 145px 75px #000, 150px 75px #000,
155px 75px #000, 160px 75px #000;
animation: jump 2s linear infinite;
}Following is the output Mario Mystery Box animation!
Here is the output:
YouTube video creating Mario Mystery Box animation using CSS
You can find the complete coding tutorial in the following YouTube video.
Complete code of HTML and CSS for creating Mario Character Jump Animation
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.mystery-box {
width: 5px;
height: 5px;
box-shadow: 0px 0px 0px transparent, 90px 5px #a52a2a, 95px 5px #a52a2a,
100px 5px #a52a2a, 105px 5px #a52a2a, 110px 5px #a52a2a,
115px 5px #a52a2a, 120px 5px #a52a2a, 125px 5px #a52a2a,
130px 5px #a52a2a, 135px 5px #a52a2a, 140px 5px #a52a2a,
145px 5px #a52a2a, 150px 5px #a52a2a, 155px 5px #a52a2a,
85px 10px #a52a2a, 90px 10px #ffa500, 95px 10px #ffa500,
100px 10px #ffa500, 105px 10px #ffa500, 110px 10px #ffa500,
115px 10px #ffa500, 120px 10px #ffa500, 125px 10px #ffa500,
130px 10px #ffa500, 135px 10px #ffa500, 140px 10px #ffa500,
145px 10px #ffa500, 150px 10px #ffa500, 155px 10px #ffa500,
160px 10px #000, 85px 15px #a52a2a, 90px 15px #ffa500, 95px 15px #000,
100px 15px #ffa500, 105px 15px #ffa500, 110px 15px #ffa500,
115px 15px #ffa500, 120px 15px #ffa500, 125px 15px #ffa500,
130px 15px #ffa500, 135px 15px #ffa500, 140px 15px #ffa500,
145px 15px #ffa500, 150px 15px #000, 155px 15px #ffa500,
160px 15px #000, 85px 20px #a52a2a, 90px 20px #ffa500,
95px 20px #ffa500, 100px 20px #ffa500, 105px 20px #ffa500,
110px 20px #a52a2a, 115px 20px #a52a2a, 120px 20px #a52a2a,
125px 20px #a52a2a, 130px 20px #a52a2a, 135px 20px #ffa500,
140px 20px #ffa500, 145px 20px #ffa500, 150px 20px #ffa500,
155px 20px #ffa500, 160px 20px #000, 85px 25px #a52a2a,
90px 25px #ffa500, 95px 25px #ffa500, 100px 25px #ffa500,
105px 25px #a52a2a, 110px 25px #a52a2a, 115px 25px #000,
120px 25px #000, 125px 25px #000, 130px 25px #a52a2a,
135px 25px #a52a2a, 140px 25px #ffa500, 145px 25px #ffa500,
150px 25px #ffa500, 155px 25px #ffa500, 160px 25px #000,
85px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #ffa500,
100px 30px #ffa500, 105px 30px #a52a2a, 110px 30px #a52a2a,
115px 30px #000, 120px 30px #ffa500, 125px 30px #ffa500,
130px 30px #a52a2a, 135px 30px #a52a2a, 140px 30px #000,
145px 30px #ffa500, 150px 30px #ffa500, 155px 30px #ffa500,
160px 30px #000, 85px 35px #a52a2a, 90px 35px #ffa500,
95px 35px #ffa500, 100px 35px #ffa500, 105px 35px #ffa500,
110px 35px #000, 115px 35px #000, 120px 35px #ffa500,
125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a,
140px 35px #000, 145px 35px #ffa500, 150px 35px #ffa500,
155px 35px #ffa500, 160px 35px #000, 85px 40px #a52a2a,
90px 40px #ffa500, 95px 40px #ffa500, 100px 40px #ffa500,
105px 40px #ffa500, 110px 40px #ffa500, 115px 40px #ffa500,
120px 40px #a52a2a, 125px 40px #a52a2a, 130px 40px #000,
135px 40px #000, 140px 40px #000, 145px 40px #ffa500,
150px 40px #ffa500, 155px 40px #ffa500, 160px 40px #000,
85px 45px #a52a2a, 90px 45px #ffa500, 95px 45px #ffa500,
100px 45px #ffa500, 105px 45px #ffa500, 110px 45px #ffa500,
115px 45px #ffa500, 120px 45px #a52a2a, 125px 45px #a52a2a,
130px 45px #000, 135px 45px #ffa500, 140px 45px #ffa500,
145px 45px #ffa500, 150px 45px #ffa500, 155px 45px #ffa500,
160px 45px #000, 85px 50px #a52a2a, 90px 50px #ffa500,
95px 50px #ffa500, 100px 50px #ffa500, 105px 50px #ffa500,
110px 50px #ffa500, 115px 50px #ffa500, 120px 50px #ffa500,
125px 50px #000, 130px 50px #000, 135px 50px #ffa500,
140px 50px #ffa500, 145px 50px #ffa500, 150px 50px #ffa500,
155px 50px #ffa500, 160px 50px #000, 85px 55px #a52a2a,
90px 55px #ffa500, 95px 55px #ffa500, 100px 55px #ffa500,
105px 55px #ffa500, 110px 55px #ffa500, 115px 55px #ffa500,
120px 55px #a52a2a, 125px 55px #a52a2a, 130px 55px #ffa500,
135px 55px #ffa500, 140px 55px #ffa500, 145px 55px #ffa500,
150px 55px #ffa500, 155px 55px #ffa500, 160px 55px #000,
85px 60px #a52a2a, 90px 60px #ffa500, 95px 60px #ffa500,
100px 60px #ffa500, 105px 60px #ffa500, 110px 60px #ffa500,
115px 60px #ffa500, 120px 60px #a52a2a, 125px 60px #a52a2a,
130px 60px #000, 135px 60px #ffa500, 140px 60px #ffa500,
145px 60px #ffa500, 150px 60px #ffa500, 155px 60px #ffa500,
160px 60px #000, 85px 65px #a52a2a, 90px 65px #ffa500, 95px 65px #000,
100px 65px #ffa500, 105px 65px #ffa500, 110px 65px #ffa500,
115px 65px #ffa500, 120px 65px #ffa500, 125px 65px #000,
130px 65px #000, 135px 65px #ffa500, 140px 65px #ffa500,
145px 65px #ffa500, 150px 65px #000, 155px 65px #ffa500,
160px 65px #000, 85px 70px #a52a2a, 90px 70px #ffa500,
95px 70px #ffa500, 100px 70px #ffa500, 105px 70px #ffa500,
110px 70px #ffa500, 115px 70px #ffa500, 120px 70px #ffa500,
125px 70px #ffa500, 130px 70px #ffa500, 135px 70px #ffa500,
140px 70px #ffa500, 145px 70px #ffa500, 150px 70px #ffa500,
155px 70px #ffa500, 160px 70px #000, 85px 75px #000, 90px 75px #000,
95px 75px #000, 100px 75px #000, 105px 75px #000, 110px 75px #000,
115px 75px #000, 120px 75px #000, 125px 75px #000, 130px 75px #000,
135px 75px #000, 140px 75px #000, 145px 75px #000, 150px 75px #000,
155px 75px #000, 160px 75px #000;
animation: jump 2s linear infinite;
}
@keyframes jump {
0%,
100% {
transform: translateY(20px);
}
50% {
transform: translateY(30px);
}
}
</style>
<title>Salow Studios</title>
</head>
<body>
<h1>Mario Mystery Box Animation</h1>
<div class="mystery-box"></div>
</body>
</html>
Thank you for reading this article. I hope that it helps you creating your own Mario Mystery Box Animation using CSS and HTML. Good luck and happy coding !
