Html Code: Elliptic Curved Border and Moving Background

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.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<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;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Elliptic Curved Border and Moving Background

Links