Infinite Moving Squares for HTML Page Background

Written by @kerixa 3 April 2021

In the following code, there is a special effect for the background for the whole HTML page or for a special paragraph or forms in the page, which can give more beauty to the appearance of your website. This style includes an infinite number of interconnected squares, all moving in diagonal direction. Enjoy!

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Exo:100);

@-webkit-keyframes bg-scrolling-reverse {
100% {
    background-position: 50px 50px;
}
}

@-moz-keyframes bg-scrolling-reverse {
100% {
    background-position: 50px 50px;
}
}

@-o-keyframes bg-scrolling-reverse {
100% {
    background-position: 50px 50px;
}
}

@keyframes bg-scrolling-reverse {
100% {
    background-position: 50px 50px;
}
}

@-webkit-keyframes bg-scrolling {
0% {
    background-position: 50px 50px;
}
}

@-moz-keyframes bg-scrolling {
0% {
    background-position: 50px 50px;
}
}

@-o-keyframes bg-scrolling {
0% {
    background-position: 50px 50px;
}
}

@keyframes bg-scrolling {
0% {
    background-position: 50px 50px;
}
}
/* Main styles */
body {
    margin-top: 13.5rem;
    color: #999;
    font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
    text-align: center;
    /* img size is 50x50 */
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
    -webkit-animation: bg-scrolling-reverse 0.92s infinite;
    /* Safari 4+ */
    -moz-animation: bg-scrolling-reverse 0.92s infinite;
    /* Fx 5+ */
    -o-animation: bg-scrolling-reverse 0.92s infinite;
    /* Opera 12+ */
    animation: bg-scrolling-reverse 0.92s infinite;
    /* IE 10+ */
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

body::before {
    content: "INFINITY";
    font-size: 4rem;
    font-weight: 100;
    font-style: normal;
}
</style><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2