Membuat Glowing Cube Animation HTML CSS

Sharing Teknologi – Membuat Glowing Cube Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Glowing Cube Animation HTML CSS Di WordPress. 

HTML (Hypertext Markup Language) adalah bahasa markah yang digunakan untuk membuat dan mendefinisikan struktur laman web. Dengan HTML, pengembang web dapat menentukan elemen-elemen seperti teks, gambar, tautan, dan formulir. Setiap elemen diidentifikasi melalui tag, yang memberikan petunjuk kepada browser tentang cara menampilkan kontennya.

HTML memberikan dasar untuk membangun halaman web dengan hierarki yang jelas, memungkinkan penyusunan dan organisasi konten. Selain itu, HTML mendukung penggunaan atribut untuk memberikan informasi tambahan tentang elemen.

Selama evolusinya, HTML telah mengalami berbagai versi, yang terus disempurnakan untuk mendukung perkembangan teknologi web dan memberikan pengalaman pengguna yang lebih baik.

CSS (Cascading Style Sheets) adalah bahasa gaya yang digunakan untuk mengontrol tampilan dan desain elemen-elemen yang telah didefinisikan dengan HTML. Fungsi utama CSS adalah memisahkan struktur (HTML) dari presentasi (tampilan visual) laman web.

Dengan CSS, pengembang dapat mengatur properti seperti warna, ukuran, jarak, dan tata letak elemen, memberikan desain yang konsisten dan menarik pada laman web. Konsep kaskade dalam CSS memungkinkan pengembang untuk menetapkan gaya secara hierarkis, dengan kemampuan untuk mewarisi atau menggantikan gaya yang telah ditetapkan sebelumnya.

CSS juga mendukung pemilihan elemen berdasarkan kelas, ID, atau hierarki, memberikan fleksibilitas dalam memodifikasi penampilan halaman web dengan efisiensi.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Glowing Cube 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 bg-dark">
<div class="glowingcube">
	<div class="cube">
		<div class="top"></div>
		<div>
			<span style="--i:0">
				<div class="h2">03</div>
				<div class="h2">03</div>
			</span>
			<span style="--i:1">
				<div class="h2">02</div>
				<div class="h2">02</div>
			</span>
			<span style="--i:2">
				<div class="h2">01</div>
				<div class="h2">01</div>
			</span>
			<span style="--i:3">
				<div class="h2">00</div>
				<div class="h2">00</div>
			</span>
		</div>
	</div>
</div>
</div>

Style CSS

@import url("https://teknologi.visitklaten.com/cloudme.fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.glowingcube {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 700px;
	font-family: "Oswald", sans-serif;
}

.glowingcube .cube {
	position: relative;
	width: 300px;
	height: 300px;
	transform-style: preserve-3d;
	transform: rotateX(-30deg);
	animation: animate 8s linear infinite;
}

@keyframes animate {
	0% {
		transform: rotateX(-30deg) rotateY(0deg);
	}

	100% {
		transform: rotateX(-30deg) rotateY(360deg);
	}
}

.glowingcube .cube div {
	position: absolute;
	top: 0;
	left: 40px;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.glowingcube .cube div span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(#220015, #f8029c);
	transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
}

.glowingcube .cube div span .h2 {
	position: absolute;
	font-size: 10em;
	color: #fff;
	transform: translateZ(50px);
}

.glowingcube .cube div span .h2:nth-child(1) {
	transform: translateZ(0) translateY(20px);
	color: rgba(0, 0, 0, 0.1);
	filter: blur(2px);
}

.glowingcube .top {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background: #0e0009;
	transform: rotateX(90deg) translateZ(150px);
}

.glowingcube .top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background: #111322;
	transform: translateZ(-380px);
	filter: blur(20px);
	box-shadow: 0 0 120px rgba(248, 2, 156, 0.2), 0 0 200px rgba(248, 2, 156, 0.4),
		0 0 300px rgba(248, 2, 156, 0.6), 0 0 400px rgba(248, 2, 156, 0.8),
		0 0 500px rgba(248, 2, 156, 1);
}

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.