Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also, subscribe to my youtube channel, where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us create the project folder structure. We start by creating a project folder called – ‘Rainbow Animation’. Inside this folder, we have two files. The first file is index.html which is the HTML document. And the second file is style.css which is the stylesheet.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document. HTML creates the elements necessary to create the structure and layout of our project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rainbow Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="rainbow-color rainbow-color-1"></div>
<div class="rainbow-color rainbow-color-2"></div>
<div class="rainbow-color rainbow-color-3"></div>
<div class="rainbow-color rainbow-color-4"></div>
<div class="rainbow-color rainbow-color-5"></div>
</div>
</body>
</html>
CSS:
Next, we create the rainbow shape and add animation to these shapes 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: #8eb0ff;
}
.container {
height: 34em;
width: 34em;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 0.6em;
box-shadow: 0 1.5em 3.5em rgba(32, 47, 80, 0.2);
}
.container:after {
content: "";
position: absolute;
height: 50.5%;
width: 100%;
background-color: #ffffff;
bottom: 0;
border-radius: 0 0 0.6em 0.6em;
}
.rainbow-color {
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
animation: spin 5s infinite;
transform-origin: 50% 0;
}
@keyframes spin {
30% {
transform: translate(-50%, -50%) rotate(180deg);
}
55% {
transform: translate(-50%, -50%) rotate(180deg);
}
85% {
transform: translate(-50%, -50%) rotate(360deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.rainbow-color-1 {
height: 11.25em;
width: 22.5em;
border: 1.25em solid #fd004c;
border-top: none;
top: calc(50% + 5.62em);
border-radius: 0 0 11.25em 11.25em;
animation-delay: 0.8s;
}
.rainbow-color-2 {
height: 10em;
width: 20em;
border: 1.25em solid #fe9000;
border-top: none;
top: calc(50% + 5em);
border-radius: 0 0 10em 10em;
animation-delay: 0.6s;
}
.rainbow-color-3 {
height: 8.75em;
width: 17.5em;
border: 1.25em solid #fff020;
border-top: none;
top: calc(50% + 4.37em);
border-radius: 0 0 8.75em 8.75em;
animation-delay: 0.4s;
}
.rainbow-color-4 {
height: 7.5em;
width: 15em;
border: 1.25em solid #3edf4b;
border-top: none;
top: calc(50% + 3.75em);
border-radius: 0 0 7.5em 7.5em;
animation-delay: 0.2s;
}
.rainbow-color-5 {
height: 6.25em;
width: 12.5em;
border: 1.25em solid #3363ff;
border-top: none;
top: calc(50% + 3.12em);
border-radius: 0 0 6.25em 6.25em;
}
@media screen and (max-width: 550px) {
body {
font-size: 12px;
}
}
Your rainbow animation is now ready. You can now go ahead and customize it the way you like by experimenting with colours, animation duration, animation delay etc.
If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys, so don’t forget to drop your queries, suggestions or feedback below.
Happy Coding!
ขอบคุณครับ สวยมาก