Sharing Teknologi – Membuat Loading Cubes Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Loading Cubes Animation HTML CSS Di WordPress.
HTML, atau HyperText Markup Language, adalah bahasa markup yang digunakan untuk membangun dan mendesain struktur dasar sebuah halaman web. Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menjadi fondasi bagi sebagian besar konten web. Bahasa ini menggunakan serangkaian elemen atau “tags” untuk mendefinisikan berbagai elemen pada halaman web, seperti judul, paragraf, gambar, tautan, dan banyak lagi.
HTML bekerja dengan cara yang terstruktur hierarkis, di mana elemen-elemen tersebut ditempatkan dalam “tag” yang bersarang. Misalnya, tag <html> mengapit seluruh halaman web, sedangkan <body> berisi konten utama seperti teks, gambar, dan tautan. HTML memberikan kerangka dasar yang memungkinkan penampil web untuk memahami dan menampilkan informasi yang tepat.
CSS, atau Cascading Style Sheets, adalah bahasa gaya yang digunakan untuk mempercantik dan memformat tampilan halaman web yang dibangun dengan HTML. Dengan menggunakan CSS, pengembang dapat mengontrol tata letak, warna, ukuran, dan gaya elemen-elemen HTML. Ini memungkinkan desain yang konsisten dan responsif di seluruh situs web.
Gaya dalam CSS diterapkan melalui aturan-aturan yang terdiri dari selektor dan properti. Selektor memilih elemen yang akan diubah gayanya, sementara properti menentukan bagaimana elemen tersebut akan diubah. Misalnya, aturan CSS mungkin mengubah warna teks (properti) pada semua tautan (selektor) menjadi biru.
Salah satu keunggulan utama HTML dan CSS adalah kemampuan mereka untuk bekerja bersama untuk membuat pengalaman pengguna yang kaya dan estetis. HTML menyediakan struktur dan konten dasar, sementara CSS menangani presentasi dan estetika. Kombinasi kedua bahasa ini memungkinkan pembuat web untuk membuat halaman yang menarik, mudah dibaca, dan berfungsi dengan baik di berbagai perangkat.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Loading Cubes Animation
Dengan evolusi teknologi web, HTML dan CSS terus mengalami perkembangan. HTML5, sebagai versi terbaru, memperkenalkan elemen baru dan perbaikan fungsionalitas, sementara CSS3 membawa fitur-fitur baru seperti animasi dan transisi untuk meningkatkan kemampuan desain. Keseluruhan, HTML dan CSS memainkan peran krusial dalam fondasi pengembangan web modern.
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="loadingcubes">
<div class="content">
<div class="cuboid">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cuboid">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cuboid">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cuboid">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
</div>
</div>
</div>
Style CSS
.loadingcubes * {
transform-style: preserve-3d;
box-sizing: border-box;
}
.loadingcubes {
margin: 0;
padding: 0;
width: 100%;
min-height: 500px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000vmin;
--grid: 5vmin;
background: radial-gradient(circle at 50% 25%, #2d0d32, #000);
}
.loadingcubes .content {
width: 20vmin;
height: 20vmin;
transform: rotateX(-35deg) rotateY(45deg);
}
.loadingcubes .cuboid {
--height: 10;
--width: 10;
--depth: 10;
--hue: 275;
--sat: 60%;
height: calc(var(--height) * 1vmin);
width: calc(var(--width) * 1vmin);
position: absolute;
animation: cube1 0.6s linear 0s infinite;
transform: translate3d(0vmin, 0vmin, -5vmin);
}
.loadingcubes .cuboid .side {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
border-radius: 2px;
}
.loadingcubes .cuboid .side:nth-of-type(1) {
transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
background: hsl(var(--hue), var(--sat), 60%);
}
.loadingcubes .cuboid .side:nth-of-type(2) {
transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
rotateY(180deg);
background: hsl(var(--hue), var(--sat), 25%);
}
.loadingcubes .cuboid .side:nth-of-type(3) {
width: calc(var(--depth) * 1vmin);
transform: translate(-50%, -50%) rotateY(90deg)
translate3d(0, 0, calc(var(--width) * 0.5vmin));
background: hsl(var(--hue), var(--sat), 75%);
}
.loadingcubes .cuboid .side:nth-of-type(4) {
width: calc(var(--depth) * 1vmin);
transform: translate(-50%, -50%) rotateY(-90deg)
translate3d(0, 0, calc(var(--width) * 0.5vmin));
background: hsl(var(--hue), var(--sat), 40%);
}
.loadingcubes .cuboid .side:nth-of-type(5) {
height: calc(var(--depth) * 1vmin);
transform: translate(-50%, -50%) rotateX(90deg)
translate3d(0, 0, calc(var(--height) * 0.5vmin));
background: hsl(var(--hue), var(--sat), 75%);
}
.loadingcubes .cuboid .side:nth-of-type(6) {
height: calc(var(--depth) * 1vmin);
transform: translate(-50%, -50%) rotateX(-90deg)
translate3d(0, 0, calc(var(--height) * 0.5vmin));
background: hsl(var(--hue), var(--sat), 20%);
}
.loadingcubes .cuboid .side:nth-of-type(6):before {
content: "";
background: #0004;
position: absolute;
transform: translateZ(30vmin);
width: 10vmin;
height: 10vmin;
filter: blur(5px);
}
.loadingcubes .cuboid:nth-child(2) {
transform: translate3d(0vmin, 0vmin, 5vmin);
animation-name: cube2;
}
.loadingcubes .cuboid:nth-child(3) {
transform: translate3d(10vmin, 0vmin, 5vmin);
animation-name: cube3;
}
.loadingcubes .cuboid:nth-child(4) {
transform: translate3d(10vmin, 0vmin, -5vmin);
animation-name: cube4;
}
@keyframes cube1 {
25% { transform: translate3d(0vmin, 0vmin, -10vmin)}
75% { transform: translate3d(10vmin, 0vmin, -10vmin)}
100% { transform: translate3d(10vmin, 0vmin, -5vmin) }
}
@keyframes cube2 {
25% { transform: translate3d(0vmin, 0vmin, 0vmin)}
75% { transform: translate3d(0vmin, 0vmin, 0vmin)}
100% { transform: translate3d(0vmin, 0vmin, -5vmin) }
}
@keyframes cube3 {
25% { transform: translate3d(10vmin, 0vmin, 10vmin)}
75% { transform: translate3d(0vmin, 0vmin, 10vmin)}
100% { transform: translate3d(0vmin, 0vmin, 5vmin) }
}
@keyframes cube4 {
25% { transform: translate3d(10vmin, 0vmin, 0vmin)}
75% { transform: translate3d(10vmin, 0vmin, 0vmin)}
100% { transform: translate3d(10vmin, 0vmin, 5vmin) }
}
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.
Komentar