Clock with Animating Rainbow Background

Written by @kerixa 10 April 2021

Today, websites are constantly competing with each other because the higher website rank, the better it can be to attract revenue. One of the things that is important in raising the ranking of websites is its style and beauty, which is gained by various elements in the page. One of these elements is a clock, which is on the home page of many websites. Shown in the code below a clock, which has transparent digits with a rainbow animating in the background.

Code Snippet:

                                                
                                                <!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
* {
    margin: 0;
    padding: 0;
    font-family: 'poppins', sans-serif;
}

Html, body {
    display: grid;
    height: 100%;
    place-items: center;
    background: #000000;
}

.wrapper {
    height: 350px;
    width: 413px;
    background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
    border-radius: 10px;
    animation: animate 1.5s linear infinite;
}

    .wrapper .display,
    .wrapper span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .wrapper .display {
        z-index: 999;
        background: #1b1b1b;
        height: 85px;
        width: 345px;
        border-radius: 2px;
        text-align: center;
    }

        .wrapper .display #time {
            line-height: 85px;
            font-size: 50px;
            font-weight: 600px;
            letter-spacing: 5px;
            background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: animate 1.5s linear infinite;
        }

@keyframes animate {
    100% {
        filter: hue-rotate(360deg);
    }
}

.wrapper span {
    height: 100%;
    width: 100%;
    background: inherit;
    border-radius: 10px;
}

    .wrapper span:last-child {
        filter: blur(20px);
</style>
<div class="wrapper"> 
<div class="display"> 
<div id="time"></div> 
</div> 
<span></span> 
<span></span> 
</div> 
<script>
setInterval(()=>{
const time = document.querySelector("#time");
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let day_night = "AM";
if(hours > 12){
    hours = hours - 12;
    day_night = "PM";
}
if(hours < 10){
    hours = "0" + hours;
}
if(minutes < 10){
    minutes = "0" + minutes;
}
if(seconds < 10){
    seconds = "0" + seconds;
}
time.textContent = hours +":" + minutes + ":" + seconds + day_night;
});
</script><a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript 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: Shahmeer, coolcoco7, SmitaPatil25, owoboycute, 092010
advertisement 2