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 https://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='https://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

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2