Terapung

Terlihat seperti piramid-piramid bercantum dan terapung di udara. Animasi ini dihasilkan dengan CSS tulen tanpa JS. Dengan adanya kod .labi:hover, .labi:hover * { animation-play-state:paused; }, animasi terhenti apabila di 'hover'.

Demo

HTML view ▼

<div class="labu">
<div class="labi">
<div class="tpusing">
<div class="bucu">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="bucu">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<style>
.labu {
--pos: 65%;
margin: 0;
padding: 0;
width: 100%;
height: 80vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to top left, transparent 48.5%, rgba(200,200,200,.2) 48.5%, rgba(200,200,200,.2) 50.5%, transparent 50.5%), linear-gradient(to top right, transparent 48.5%, rgba(200,200,200,.2) 48.5%, rgba(200,200,200,.2) 50.5%, transparent 50.5%), #0e4964;
  background-size: 30px 30px, 30px 30px, 100% 100%;
  background-attachment: fixed;
}
.labu * {
transform-style: preserve-3d;
}
.labi {
width: 35vmin;
height: 30.5vmin;
    transition: all 1s ease 0s;
transform: translate(0px, -5vmin); 
animation: apung 6s ease-in-out 0s infinite;
cursor: pointer;
}
.labi:before {
    content: "";
    position: absolute;
    width: 33%;
    height: 33%;
    left: 33%;
    top: 33%;
    transform: rotateX(60deg) translateZ(-40vmin);
    border-radius: 100%;
    box-shadow: 0 0 5vmin 0 #0000006b, 0 0 10vmin 0 #0000006b inset;
    filter: blur(10px);
    opacity: 0.25;
}
.labi:hover, .labi:hover * { animation-play-state:paused; }
.labi:active .tpusing { animation: gerake 3s linear 0s infinite; }
@keyframes gerake {
100% { transform: rotateY(360deg) rotateX(360deg); }
}
@keyframes apung {
50% { transform: translate(0px, 10vmin); }
}
.bucu {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateX(0deg);
}
.bucu span {
background: #343434;
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    --clr: #0000003b;
--shadow: 
repeating-conic-gradient(#0003 0.000001%, #fff0 .00005%, #fff0 .00035%, #fff0 .00005%),  
repeating-conic-gradient(#fff2 0.00002%, #fff0 .00008%, #fff0 .0008%, #fff0 .00008%), 
radial-gradient(circle at 50% 37%, #fff -25%, var(--clr) 45%),   
linear-gradient(180deg, var(--clr) 0 0%, transparent 3%),  
linear-gradient(-60deg, var(--clr) 0 33%, transparent 36%),   
linear-gradient(60deg, var(--clr) 0 33%, transparent 36%);
}
.bucu span:nth-child(2) {
    transform: rotateX(70.7deg);
    transform-origin: 50% 0;
    background: var(--shadow), #e1e1e1;
}
.bucu span:nth-child(3) {
    transform: rotateZ(60deg) rotateY(0deg) rotateX(109.35deg);
    transform-origin: 0% 0%;
    background: var(--shadow), #8b898b;
}
.bucu span:nth-child(4) {
    background: var(--shadow), #646464;
    transform: rotateZ(-60deg) rotateY(0deg) rotateX(109.35deg);
    transform-origin: 100% 0%;
}
.bucu + .bucu {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateZ(180deg) rotateX(-70deg);
}
.bucu + .bucu span:nth-child(2) {
    --clr: #0000003b;
    background: var(--shadow), #c3c3c3;
}
.tpusing {
position: absolute;
width: 100%;
height: 100%;
animation: gerak 10s ease-in-out 0s infinite;
}
@keyframes gerak {
0%, 100% { transform: rotateY(-15deg); }
50% { transform: rotateY(15deg); }
}
</style>

Kredit: codepen.io/josetxu. Kod HTML untuk demo ini telah disesuaikan dan diubah sedikit dari kod asal.