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 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='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