Membuat Neon Digital Watch Animation CSS

Sharing Teknologi – Membuat Neon Digital Watch Animation Effect HTML CSS Di WordPress. HTML, atau HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat dan mendefinisikan struktur dasar halaman web.

Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menggunakan serangkaian “tags” atau tanda untuk menandai dan mengelompokkan elemen-elemen dalam dokumen. Setiap tag memiliki peran spesifik, seperti <head> untuk informasi metadata dan <body> untuk konten utama. HTML memberikan dasar untuk menampilkan teks, gambar, tautan, formulir, dan elemen-elemen lainnya dalam suatu halaman web.

CSS, atau Cascading Style Sheets, adalah bahasa gaya yang berkolaborasi dengan HTML untuk mengontrol presentasi dan tampilan halaman web. Dengan CSS, pengembang dapat mengubah warna, ukuran, jenis font, tata letak, dan gaya lainnya dari elemen HTML. Pendekatan ini memungkinkan pemisahan antara struktur dan desain, memudahkan perubahan gaya tanpa mempengaruhi struktur dasar. Selektor CSS memilih elemen yang akan diubah, sedangkan properti menentukan bagaimana perubahan tersebut diterapkan.

Ketika HTML dan CSS digunakan bersama, mereka membentuk dasar pengembangan web modern. HTML menyediakan kerangka kerja struktural, sementara CSS menambahkan dimensi estetika dan presentasi. Keduanya bekerja secara sinergis, memungkinkan desainer dan pengembang untuk menciptakan halaman web yang menarik, responsif, dan kohesif.

Seiring dengan perkembangan HTML5 dan CSS3, fungsionalitas dan kreativitas dalam pembangunan web terus berkembang, menjadikan kombinasi keduanya sebagai fondasi yang tak tergantikan dalam dunia pengembangan web.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Neon Digital Watch Animation

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.

HTML

<div class="position-relative p-3 my-1 overflow-hidden">
<div class="neondigitalwatch">
	<div class="btn-okey h1">  
	   <div id="reloj"></div> 
	</div>
</div>
</div>

Style CSS

@import url('https://teknologi.visitklaten.com/cloudme.fonts.googleapis.com/css2?family=Inconsolata:wght@800&display=swap');
.neondigitalwatch {
	background: #000;
	min-height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-repeat: none;
	background-size: cover;
}

.neondigitalwatch .btn-okey {
	border-radius: 10px;
	padding: 10px;
	color: #333;
	box-shadow: 1px 1px 10px 2px #1cefff;
	-webkit-animation: glow 2s infinite;
	animation: glow 2s infinite;
	background: #1cefff;
	font-size: 6em;
	font-family: "Inconsolata", monospace;
	font-weight: 800;
}

@-webkit-keyframes glow {
	50% {
		box-shadow: 1px 1px 30px 10px lightseagreen;
	}
}

@keyframes glow {
	50% {
		box-shadow: 1px 1px 30px 10px lightseagreen;
	}
}

JavaScript

 var time = [, , , ];
        var fecha = new Date();
        var reloj = document.getElementById('reloj');
        time[0] = fecha.getHours();
        time[1] = fecha.getMinutes();
        time[2] = fecha.getSeconds();

        var id = setInterval(update, 1000);

        //reloj.innerHTML='<div id="hora">'+time[0]+':'+time[1]+':'+time[2]+'</div>';
        function update() {
            fecha = new Date();
            time[0] = modtime(fecha.getHours());
            time[1] = modtime(fecha.getMinutes());
            time[2] = modtime(fecha.getSeconds());
            reloj.innerHTML = '<span class="square" id="h">' + time[0] + '</span><span class="point">:</span><span class="square" id="m">' + time[1] + '</span><span class="point">:</span><span class="square" id="s">' + time[2] + '</span>';

        }

        function modtime(hora) {
            return (hora < 10 ? '0' + hora : hora);
        }

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.