CSS Animation Effect - Using HTML & CSS | Project - 2

Description:-

Hey Codex, today in this blog you’ll learn "How to create a ''CSS Animation Effect- Using HTML & CSS | Project - 2".

Let's see!

First, try it by following the video tutorial !

This tutorial video can help you to Create a CSS Animation Effect using HTML and CSS.

Source code:-

All the source codes are available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

HTML

Create a file with the name of index.html and paste the HTML code in it.

CSS

Now create a file with the name of style.css and paste the CSS code in it.

*{
    margin: 0;padding: 0;
    box-sizing: border-box;
}
body{
    background: #102626;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container{
    width:200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    -webkit-box-reflect: below 1px linear-gradient(to bottom,transparent ,rgba(0, 0, 0,0.1));
}
.loader1{
    width:200px;
    height: 200px;
    background: #15121d;
    position: absolute;
    border-radius: 50%;
    animation: rotate 2s linear  infinite normal;
}
.loader1::before{
    content: '';
    width: 100px;
    height:200px;
    background: linear-gradient(to top,transparent ,rgba(255, 255, 0,0.9));
    background-size: 100px 180px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}
.loader1::after{
    content: '';
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 0, 1);
    position: absolute;
    top: 0px;
    left: 97.5px;
    border-radius: 50%;
    box-shadow: 0 0 10px  rgba(255, 255, 0, .9),
                0 0 20px  rgba(255, 255, 0,.9),
                0 0 30px rgba(255, 255, 0,.9),
                0 0 40px rgba(255, 255, 0,.9),
                0 0 50px rgba(255, 255, 0,.9),
                0 0 60px rgba(255, 255, 0,.9),
                0 0 70px rgba(255, 255, 0,.9),
                0 0 80px rgba(255, 255, 0,.9),
                0 0 90px rgba(255, 255, 0,.9),
                0 0 100px rgba(255,255,0,.9);

}
.loader1 span{
    width:190px;
    height: 190px;
    background:#15121d;
    position: absolute;
    top:5px;
    left: 5px;
    border-radius: 50%;
}
.loader2{
    width:160px;
    height: 160px;
    background: #15121d;
    position: absolute;
    border-radius: 50%;
    animation: rotate 2s linear  infinite reverse;
    
}
.loader2::before{
    content: '';
    width: 80px;
    height:160px;
    background: linear-gradient(to top,transparent ,rgba(0, 0, 255,0.9));
    background-size: 80px 140px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}
.loader2::after{
    content: '';
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 255, 1);
    position: absolute;
    top: 0px;
    left: 77.5px;
    border-radius: 50%;
    box-shadow: 0 0 10px  rgba(0, 0, 255, .9),
                0 0 20px  rgba(0, 0, 255,.9),
                0 0 30px rgba(0, 0, 255,.9),
                0 0 40px rgba(0, 0, 255,.9),
                0 0 50px rgba(0, 0, 255,.9),
                0 0 60px rgba(0, 0, 255,.9),
                0 0 70px rgba(0, 0, 255,.9),
                0 0 80px rgba(0, 0, 255,.9),
                0 0 90px rgba(0, 0, 255,.9),
                0 0 100px rgba(0,0,255,.9);

}
.loader2 span{
    width:150px;
    height: 150px;
    background:#15121d;
    position: absolute;
    top:5px;
    left: 5px;
    border-radius: 50%;
}
@keyframes rotate{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}