Animated Circles and Icons for ChatBot Landing Page Design Tutotorial

animated-banner.css

/**
* CSS Code for Animated Banner
* Chatbot Landing Page Design Tutorial
* Author: Mian Shahzad Raza
**/
.animated-banner-container {
    height: 600px;
    overflow: hidden;
}
.animated-circle {
    width: 900px;
    height: 900px;
    position: relative;
}

/* Outer ring - clockwise rotation */
.outer-ring {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: rotateCounterClockwise 75s linear infinite;
}

/* Icons - counter-clockwise rotation */
.animated-circle .icons {
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    position: absolute;
    top: 25px;
    left: 25px;
    animation: rotateClockwise 45s linear infinite;
}

/* Inner ring - clockwise rotation */
.inner-ring {
    width: calc(100% - 250px);
    height: calc(100% - 250px);
    position: absolute;
    top: 125px;
    left: 125px;
    animation: rotateCounterClockwise 75s linear infinite;
}

.outer-ring img, .inner-ring img, .animated-circle .icons img {
    width: 100%;
    height: 100%;
}

/* Animation keyframes */
@keyframes rotateClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}