In this artical i will provide html and css code for a website . in this preloader i'm design a cube effect to load aur website :
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeHubDeep</title>
<style>
body{
height: 80vh;
align-items: center;
justify-content: center;
display: flex;
}
.loader{
width: 50px;
height: 50px;
margin: 50px auto 0;
transform: rotatex(30deg) rotatey(45deg);
transform-style: preserve-3d;
position: relative;
animation: cube-spin 1.5s infinite ease-in-out alternate;
}
.loader .side{
transform-style: preserve-3d;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loader .side:before{
content: "";
background: #43d300;
opacity: 0.5;
transform: translatez(1.7em);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
animation: cube-explode 1.5s infinite ease-in-out;
}
.side:nth-child(1){ transform: rotatey(90deg); }
.side:nth-child(2){ transform: rotatey(180deg); }
.side:nth-child(3){ transform: rotatey(270deg); }
.side:nth-child(4){ transform: rotatey(360deg); }
.side:nth-child(5){ transform: rotatex(90deg); }
.side:nth-child(6){ transform: rotatex(270deg); }
@keyframes cube-spin{
0% { transform: rotatex(30deg) rotatey(45deg); }
100% { transform: rotatex(30deg) rotatey(405deg);}
}
@keyframes cube-explode{
0% { transform: translatez(1.7em); }
50% { transform: translatez(3em); }
100% { transform: translatez(1.7em); }
}
</style>
</head>
<body>
<div class="loader">
<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>
</body>
</html>
0 Comments