<!-- 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>