Cara Membuat Animasi Jam Weker Dengan HTML CSS -

Animasi dalam sebuah website tentu banyak cara membuat serta mengaplikasikan bisa menggunakan Javascript, JQuery, Vue JS, Angular JS atau yang lainnya. Pada kesempatan kali ini saya akan membagikan sedikit tutorial tentang cara membuat animasi jam sederhana dengan HTML CSS. Sahabat bisa langsung ikutin tahap demi tahap cara membuatnya.Tahap yang pertama kita siapkan terlebih dahulu struktur HTML seperti berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Animasi Sebuah Jam We</title>
	
</head>
<body>
	<div class="jam">
		<span></span>
	</div>
</body>
</html>

Tahap yang ke-dua ditambahkan style css untuk mempercantik tampilannya, ketikan kode CSS dibawah ini:

<style type="text/css">
		body{
			margin:0;
			padding:0;
			background: #123123;
		}
		.jam{
			position: absolute;
			top:50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 300px;
			height: 300px;
			border: 20px solid #00c3ef;
			border-radius: 45px;
			background: url(watchs.png)no-repeat;
			background-size: cover;
			box-shadow: -2px 2px 0 #232323, inset 0 0 20px rgba(0,0,0,.5);
		}
		.jam:before
		{
			content: '';
			position: absolute;
			top:calc(50% - 5px);
			left: 50%;
			width: 40%;
			height: 6px;
			background: #123123;
			border-radius: 3px;
			animation: animate 70s linear infinite;
			transform-origin: left;
		}
		.jam:after
		{
			content: '';
			position: absolute;
			top:calc(50% - 3px);
			left: 50%;
			width: 30%;
			height: 6px;
			background: #123123;
			border-radius: 3px;
			animation: animate 900s linear infinite;
			transform-origin: left;
		}
		span{
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #00c3ef;
			z-index: 1;
		}
		@keyframes animate 
		{
			0%
			{
				transform: rotate(-90deg);
			}
			100%
			{
				transform: rotate(270deg);
			}
		}
	</style>

Sahabat jangan lupa untuk menyiapkan gambar yang nanti disisipkan sebagai background pada div class=”jam”, jadi setelah sudah selesai diketikan langsung dijalankan pada browser maka tampilanya akan seperti dibawah ini:

Demikian pembahasan artikel ini tentang cara membuat animasi jam sederhana dengan HTML CSS, semoga bermanfaat dan selamat mencoba

terima kasih

Cara Membuat Animasi Jam Weker Dengan HTML CSS

Kategori