Wednesday, February 8, 2023
HomeSoftware DevelopmentSnowfall Animation Impact utilizing CSS

Snowfall Animation Impact utilizing CSS


  

* {

    padding: 0%;

    margin: 0%;

    box-sizing: border-box;

}

  

physique {

    width: 100vw;

    top: 100vh;

    overflow-x: hidden;

}

  

  

.container {

    place: relative;

    width: 100%;

    top: 100%;

    overflow: hidden;

    background: url(

    background-measurement: cowl;

    background-position: middle;

    background-repeat: no-repeat;

}

  

.container::earlier than {

    content material: "";

    place: absolute;

    width: 100%;

    top: 100%;

    background: rgba(0, 0, 0, 0.479);

}

  

  

.text-content {

    place: absolute;

    high: 50%;

    left: 50%;

    rework: translate(-50%, -50%);

    width: 90%;

    show: flex;

    flex-route: column;

    align-items: middle;

    justify-content material: middle;

    text-align: middle;

    colour: rgb(255, 255, 255);

    text-shadow: 2px 1px 5px rgb(0, 89, 255);

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    letter-spacing: 2px;

}

  

.text-content h1 {

    font-size: 4rem;

}

  

.text-content p {

    font-size: 1.2rem;

    font-style: italic;

    font-weight: lighter;

    width: 80%;

}

  

  

.snow-ball-container .snow-ball {

    place: absolute;

    top: 10px;

    width: 10px;

    border-radius: 50%;

    background: white;

  

}

  

.snow-ball-container .snow-ball:nth-child(even) {

    place: absolute;

    width: 16px;

    top: 16px;

    animation: flake-motion 15s linear infinite;

}

  

  

.snow-ball-container .snow-ball:nth-child(1) {

    high: -50%;

    left: 5%;

    width: 20px;

    top: 20px;

    animation: snowball-animation 12s linear 2s infinite;

}

  

.snow-ball-container .snow-ball:nth-child(2) {

    high: -20%;

    left: 10%;

}

  

.snow-ball-container .snow-ball:nth-child(3) {

    high: -50%;

    left: 15%;

    animation: snowball-animation 12s linear infinite;

}

  

.snow-ball-container .snow-ball:nth-child(4) {

    high: -10%;

    left: 20%;

}

  

.snow-ball-container .snow-ball:nth-child(5) {

    high: -20%;

    left: 25%;

    width: 20px;

    top: 20px;

    animation: snowball-animation 12s linear 2s infinite;

}

  

.snow-ball-container .snow-ball:nth-child(6) {

    high: -40%;

    left: 30%;

}

  

.snow-ball-container .snow-ball:nth-child(7) {

    high: -30%;

    left: 35%;

    width: 5px;

    top: 5px;

    animation: snowball-animation 12s linear infinite;

}

  

.snow-ball-container .snow-ball:nth-child(8) {

    high: -20%;

    left: 40%;

}

  

.snow-ball-container .snow-ball:nth-child(9) {

    high: -50%;

    left: 45%;

    width: 5px;

    top: 5px;

    animation: snowball-animation 12s linear 2s infinite;

}

  

.snow-ball-container .snow-ball:nth-child(10) {

    high: -5%;

    left: 50%;

}

  

.snow-ball-container .snow-ball:nth-child(11) {

    high: -20%;

    left: 60%;

    animation: snowball-animation 12s linear infinite;

}

  

.snow-ball-container .snow-ball:nth-child(12) {

    high: -10%;

    left: 70%;

}

  

.snow-ball-container .snow-ball:nth-child(13) {

    high: -50%;

    left: 80%;

    width: 5px;

    top: 5px;

    animation: snowball-animation 12s linear 2s infinite;

}

  

.snow-ball-container .snow-ball:nth-child(14) {

    high: -20%;

    left: 90%;

}

  

.snow-ball-container .snow-ball:nth-child(15) {

    high: -50%;

    left: 95%;

    width: 30px;

    top: 30px;

    animation: snowball-animation 12s linear infinite;

}

  

  

@keyframes snowball-animation {

    0% {

        rework: translate(0);

        opacity: 1;

    }

  

    20% {

        rework: translate(4px, 100px);

        opacity: 0.8;

    }

  

    40% {

        rework: translate(-7px, 200px);

        opacity: 0.7;

    }

  

    60% {

        rework: translate(10px, 400px);

        opacity: 0.5;

    }

  

    80% {

        rework: translate(-14px, 700px);

        opacity: 0.2;

    }

  

    100% {

        rework: translate(16px, 900px);

        opacity: 0;

    }

}

  

@keyframes flake-motion {

    0% {

        rework: translate(-2px, 0);

        opacity: 1;

    }

  

    20% {

        rework: translate(-9px, 200px);

        opacity: 0.9;

    }

  

    40% {

        rework: translate(14px, 300px);

        opacity: 0.7;

    }

  

    60% {

        rework: translate(-22px, 400px);

        opacity: 0.6;

    }

  

    80% {

        rework: translate(30px, 600px);

        opacity: 0.5;

    }

  

    90% {

        rework: translate(-40px 800px);

        opacity: 0.3;

    }

  

    100% {

        rework: translate(52px, 1000px);

        opacity: 0;

    }

}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments