HTML CSS & JAVASCRIPT, YouTube

Animated eid mubarak 2021

Animated eid mubarak 2021

Coding BD given here Animated eid mubarak 2021 using Html CSS & Javascript. We create css animation effects step by step. It is the most important part Of latest css animation effects. We created a css background animation. We have given more importance to javascript animation. We have used css background animation because they need high effects. Thank you so much.

Animated eid mubarak 2021

😍😍 If You like this video Please like, share and subscribe This video.😍😍

😍😍 Check Others Programming Video👇

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART2Jc3yw&t=3s

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLkyrkoS_w&t=69s

➡️ CSS Clip Path Hover Circle Hover Effects: https://www.youtube.com/watch?v=cRSgoViJdR0

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5PdX7Ag&t=14s

➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF-efdJQ&t=102s

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuVB6B5KQ

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6HpxMmfX4

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR6ailIk&t=28s

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJkXQIIs&t=77s

Here is all Source code. You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!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>Eid Mubarak</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <section>
        <div class="box">
            <div class="circle">
                <h2>Eid <br> Mubarak</h2>
            </div>
        </div>
    </section>
    <script>
        function bubbles(){
            var count = 500;
            let section = document.querySelector('section');
            let i = 0;
            while(i < count){
                let bubble = document.createElement('i');
                let x = Math.floor(Math.random() * window.innerWidth);
                let y = Math.floor(Math.random() * window.innerHeight);

                let size = Math.random() * 15;
                bubble.style.left = x + 'px';
                bubble.style.top = y + 'px';
                bubble.style.width = 1 + size + 'px';
                bubble.style.height = 1 + size + 'px';
                
                bubble.style.animationDuration = 5+size+'s';
                bubble.style.animationDelay = -size+'s';
                section.appendChild(bubble);
                i++
            }
        }
        bubbles();
    </script>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Satisfy", cursive;
}

body {
    overflow: hidden;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000000;
}

section .box {
    position: absolute;
    width: 450px;
    height: 450px;
}

section .box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #fff, transparent);
    opacity: 0.1;
    transform: rotate(180deg);
    transform-origin: top;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

section .box .circle {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff, #fff);
    box-shadow: 0 0 10px #fff, 0 0 40px #fff, 0 0 80px #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 1;
    animation: bounce 15s linear infinite;
    -webkit-animation: bounce 15s linear infinite;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

@keyframes bounce {
    0% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }
    25% {
        transform: translateY(25%);
        -webkit-transform: translateY(25%);
        -moz-transform: translateY(25%);
        -ms-transform: translateY(25%);
        -o-transform: translateY(25%);
    }
    50% {
        transform: translateY(40%);
        box-shadow: 0 0 10px #a81f1f, 0 0 40px #bd0e0e, 0 0 80px #c90b0b;
        -webkit-transform: translateY(40%);
        -moz-transform: translateY(40%);
        -ms-transform: translateY(40%);
        -o-transform: translateY(40%);
    }
    75% {
        box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }
    100% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }
}

section .box .circle::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: linear-gradient(315deg, #fff, #e4e3e8);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

section .box .circle h2 {
    position: absolute;
    z-index: 2;
    font-size: 4rem;
    color: #000000;
    text-align: center;
}

section i {
    position: absolute;
    background: #ffffff;
    border-radius: 100%;
    animation: animate linear infinite;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    -webkit-animation: animate linear infinite;
    clip-path: polygon(50% 0%, 56% 40%, 100% 35%, 60% 52%, 80% 90%, 49% 60%, 20% 90%, 37% 52%, 0% 35%, 41% 41%);
}

section i:nth-child(even) {
    background: transparent;
    border: 1px solid #b41616;
}

@keyframes animate {
    0% {
        transform: translateY(0);
        opacity: 0;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-2000%);
        opacity: 0;
        -webkit-transform: translateY(-2000%);
        -moz-transform: translateY(-2000%);
        -ms-transform: translateY(-2000%);
        -o-transform: translateY(-2000%);
    }
}

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

Facebook Page: https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat-ho… 

GitHub: https://github.com/cgsaleh8383

You can see Image Hover Effect

#codingbd #eidmubarak #htmlcss

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *