Elliptic Curved Border and Moving Background

Written by @kerixa 30 March 2021

You can use beautiful and various styles to beautify your website. Some of the most used styles are backgrounds and borders. The following code contains a specific style for the background of the page. In this code, a text is located in an elliptical border and blue curves and diagonal lines are constantly moving in the background. This code increases the attractiveness of your website and attracts more attention.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
html {
    height: 100%;
}

body {
    margin: 0;
}

.background {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #aaf 50%, #55f 50%);
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    transition-timing-function: cubic-bezier(0.1,0.7,0.5,0.3);
    z-index: -1;
}

.back1 {
    transition-timing-function: cubic-bezier(0.1,0.7,0.5,0.3);
    animation-direction: alternate-reverse;
    animation-duration: 10s;
}

.back2 {
    transition-timing-function: cubic-bezier(0.1,0.7,0.5,0.3);
    animation-duration: 9s;
}

.content {
    background-color: rgba(0,0,255,.8);
    color: #fff;
    text-shadow: 0 0 2px #000, 2px 1px 0 #ccc;
    border: 8px double #fff;
    border-radius: 50%;
    box-shadow: 0 0 .5em rgba(0,0,0,0.9), inset 0 0 20px #fff;
    box-sizing: border-box;
    left: 50%;
    padding: 10vmin;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

h1 {
    font-family: Courier New;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(25%);
    }
}
</style>
<div class="background"></div>
<div class="background back1"></div>
<div class="background back2"></div>
<div class="content">
    <h1>HTML Best Codes</h1>
</div>
<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!

Comments

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

0 / 300