Halwa mata

  Perkataan yang mungkin jarang-jarang kita sebut - halwa mata. Atau tak pernah kita sebut (?)

Maksud: Pertunjukan, tontonan atau pemandangan yang mengasyikkan.

Demo (hover atau tap, animasi akan terhenti)

HTML view ▼

<div class="labu">
<div class="cube"></div>
</div>
<style>
  :root {
--size: 50;
--speed: 10;
--trans: linear;
--hole: #fafafa;  
--red: #e06666;
--orange: #ff5722;
--yellow: #ffc107;
--green: #b7dc39;
--cyan: #39dcc7;
--blue: #3992dc;
--purple: #4739dc;
--violet: #9c39dc;
--pink: #dc399c;
--brown: #b13333;
--ini: from 90deg at;
--end: 0 25%, #fff0 0 100%;
--bg:
conic-gradient(var(--ini) 97.5% 97.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 95% 95%, var(--brown) var(--end)), 
conic-gradient(var(--ini) 92.5% 92.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 90% 90%, var(--pink) var(--end)), 
conic-gradient(var(--ini) 87.5% 87.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 85% 85%, var(--violet) var(--end)), 
conic-gradient(var(--ini) 82.5% 82.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 80% 80%, var(--purple) var(--end)), 
conic-gradient(var(--ini) 77.5% 77.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 75% 75%, var(--blue) var(--end)), 
conic-gradient(var(--ini) 72.5% 72.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 70% 70%, var(--cyan) var(--end)), 
conic-gradient(var(--ini) 67.5% 67.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 65% 65%, var(--green) var(--end)), 
conic-gradient(var(--ini) 62.5% 62.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 60% 60%, var(--yellow) var(--end)), 
conic-gradient(var(--ini) 57.5% 57.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 55% 55%, var(--orange) var(--end)), 
conic-gradient(var(--ini) 52.5% 52.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 50% 50%, var(--red) var(--end)), 
conic-gradient(var(--ini) 47.5% 47.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 45% 45%, var(--brown) var(--end)),
conic-gradient(var(--ini) 42.5% 42.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 40% 40%, var(--pink) var(--end)),
conic-gradient(var(--ini) 37.5% 37.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 35% 35%, var(--violet) var(--end)),
conic-gradient(var(--ini) 32.5% 32.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 30% 30%, var(--purple) var(--end)),
conic-gradient(var(--ini) 27.5% 27.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 25% 25%, var(--blue) var(--end)),
conic-gradient(var(--ini) 22.5% 22.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 20% 20%, var(--cyan) var(--end)),
conic-gradient(var(--ini) 17.5% 17.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 15% 15%, var(--green) var(--end)),
conic-gradient(var(--ini) 12.5% 12.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 10% 10%, var(--yellow) var(--end)),
conic-gradient(var(--ini) 7.5% 7.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 5% 5%, var(--orange) var(--end)),
conic-gradient(var(--ini) 2.5% 2.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 0% 0%, var(--red) var(--end));
--bg-side:
conic-gradient(var(--ini) 97.5% 97.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 95% 95%, var(--orange) var(--end)), 
conic-gradient(var(--ini) 92.5% 92.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 90% 90%, var(--yellow) var(--end)), 
conic-gradient(var(--ini) 87.5% 87.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 85% 85%, var(--green) var(--end)), 
conic-gradient(var(--ini) 82.5% 82.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 80% 80%, var(--cyan) var(--end)), 
conic-gradient(var(--ini) 77.5% 77.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 75% 75%, var(--blue) var(--end)), 
conic-gradient(var(--ini) 72.5% 72.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 70% 70%, var(--purple) var(--end)), 
conic-gradient(var(--ini) 67.5% 67.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 65% 65%, var(--violet) var(--end)), 
conic-gradient(var(--ini) 62.5% 62.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 60% 60%, var(--pink) var(--end)), 
conic-gradient(var(--ini) 57.5% 57.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 55% 55%, var(--brown) var(--end)), 
conic-gradient(var(--ini) 52.5% 52.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 50% 50%, var(--red) var(--end)), 
conic-gradient(var(--ini) 47.5% 47.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 45% 45%, var(--orange) var(--end)),
conic-gradient(var(--ini) 42.5% 42.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 40% 40%, var(--yellow) var(--end)),
conic-gradient(var(--ini) 37.5% 37.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 35% 35%, var(--green) var(--end)),
conic-gradient(var(--ini) 32.5% 32.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 30% 30%, var(--cyan) var(--end)),
conic-gradient(var(--ini) 27.5% 27.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 25% 25%, var(--blue) var(--end)),
conic-gradient(var(--ini) 22.5% 22.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 20% 20%, var(--purple) var(--end)),
conic-gradient(var(--ini) 17.5% 17.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 15% 15%, var(--violet) var(--end)),
conic-gradient(var(--ini) 12.5% 12.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 10% 10%, var(--pink) var(--end)),
conic-gradient(var(--ini) 7.5% 7.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 5% 5%, var(--brown) var(--end)),
conic-gradient(var(--ini) 2.5% 2.5%, var(--hole) var(--end)), 
conic-gradient(var(--ini) 0% 0%, var(--red) var(--end));
}
.labu {
margin: 0;
padding: 0;
width: 100%;
height: 78vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
perspective: 300vmin;
background: var(--hole);
}
.cube {
width: calc(var(--size) * 1vmin);
height: calc(var(--size) * 1vmin);
background: var(--bg), var(--hole);
background-size: 200% 200%;
background-position: 0% 0%;
background-repeat: no-repeat;
transform: rotateX(45deg) rotateZ(45deg) translateZ(calc(calc(var(--size) * 1vmin) / 2));
transform-style: preserve-3d;
animation: move-top calc(var(--speed) * 1s) var(--trans) 0s infinite;
}
.cube:before, .cube:after {
content: "";
background: var(--bg-side), var(--hole);
background-size: 200% 200%;
background-position: 100% 100%;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
transform: rotate(180deg) rotateY(-90deg) translateY(calc(var(--size) * 1vmin));
transform-origin: right bottom;
animation: move-side calc(var(--speed) * 1s) var(--trans) calc(var(--speed) * -0.95s) infinite;
opacity: 0.65;
} 
.cube:after {
transform: rotate(180deg) rotateY(-90deg) rotateX(-90deg)  translateY(calc(var(--size) * 1vmin));
opacity: 0.35;
}
@keyframes move-top {
100% { background-position: 100% 100%; }
}
@keyframes move-side {
100% { background-position: 0% 0%; }
}
.cube:hover, .cube:hover:before, .cube:hover:after {
animation-play-state: paused;
}
</style>

Tutup