CSS Animasi 3D Box Untuk Loading Page
Loading Page
Pada sebuah halaman sebuah Website biasanya terdapat beberapa animasi loading yang unik dan menarik. Tentusaja animasi tersebut membuat pembaca tertarik.
Kali ini saya akan membuat sebuah Loading Page dengan animasi 3D Box menggunakan HTML dan CSS
Pertama kita buat file HTML dengan nama index.html dan pastekan program berikut.
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="top">
<h2>codesaurus</h2>
<h4><i class="fab fa-instagram"></i>by AdnanBor</h4>
</div>
<div id="box">
<div class="face1 color1"></div>
<div class="face2 color1"></div>
<div class="face3 color2"></div>
<div class="face4 color2"></div>
<div class="face5 color3"></div>
<div class="face6 color3"></div>
</div>
</div>
</body>
</html>
Kemudian kita buat file CSS bernama style.css kemudian coppy & paste perogram berikut.
body {
background-color: #262626;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
min-height: 600px;
}
#top {
position: absolute;
top: 25%;
padding-bottom: 20px;
border-bottom-color:#f0f0f0;
border-bottom: 1px solid #ccc;
text-align: center;
}
h2{
font-family: Verdana;
font-size: 2em;
color: #f0f0f0;
}
h4 {
font-family: sans-serif;
margin-bottom: 0px;
color: #f0f0f0
}
h4 i{
margin-right:5px;
}
#container {
height: 100vh;
width: 50vw;
min-height: 600px;
min-width: 300px;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
perspective: 500px;
}
#box * {
width: 150px;
height: 150px;
backface-visibility:visible;
position: absolute;
margin: 0 auto;
}
#box {
margin-top: 200px;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
animation: skew 3s linear 0s infinite;
}
.face2 {
transform: translateZ(-150px);
}
.face3 {
transform: rotateX(90deg) translateZ(75px) translateY(-75px);
}
.face4 {
transform: rotateX(90deg) translateZ(-75px) translateY(-75px);
}
.face5 {
transform: rotateY(90deg) translateZ(-75px) translateX(75px);
}
.face6 {
transform: rotateY(90deg) translateZ(75px) translateX(75px);
}
.color1 {
background: linear-gradient(#ffffff, #f0f0f0, #eaeaea);
opacity: 0.8;
}
.color2 {
background: linear-gradient(#dbdbdb, #d2d2d2, #cecece);
opacity: 0.8;
}
.color3 {
background: linear-gradient(#d0d0d0, #c7c7c7, #c2c2c2);
opacity: 0.8;
}
@keyframes skew {
0% {
transform: rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateY(360deg) rotateZ(360deg);
}
}
Jalankan Web server dan runnning program pada Browser.
Atau jalankan secara Live disini
No comments: