Tarian berubah bentuk, bulat - segi empat

Demo

HTML view ▼

<div class="labu">
<div class="labi">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</div>
<style>
  :root {
  --sp: 1s;
  --bg: #3884ff45; 
}    
.labu {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 85vmin;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #888888;
}
.labi {
  display: flex;
  align-items: center;
  justify-content: center;
}  
.labi div {
  width: var(--sz);
  height: var(--sz) ;
  box-shadow: 0 0 1vmin 0 var(--bg), -0.25vmin 0.25vmin 1vmin 0 #000b;
  background: var(--bg);
  position: absolute;
  animation: twist calc(var(--sp) * 1) ease-in-out 0s infinite alternate;
} 
.labi div:nth-child(1) {
  --sz: 65vmin;
  animation-delay: calc(var(--sp) * 0.07);
  filter: hue-rotate(15deg);
} 
.labi div:nth-child(2) {
  --sz: 60vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 2);
  filter: hue-rotate(30deg);
} 
.labi div:nth-child(3) {
  --sz: 55vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 3);
  filter: hue-rotate(45deg);
} 
.labi div:nth-child(4) {
  --sz: 50vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 4);
  filter: hue-rotate(60deg);
} 
.labi div:nth-child(5) {
  --sz: 45vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 5);
  filter: hue-rotate(75deg);
} 
.labi div:nth-child(6) {
  --sz: 40vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 6);
  filter: hue-rotate(90deg);
} 
.labi div:nth-child(7) {
  --sz: 35vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 7);
  filter: hue-rotate(105deg);
} 
.labi div:nth-child(8) {
  --sz: 30vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 8);
  filter: hue-rotate(120deg);
} 
.labi div:nth-child(9) {
  --sz: 25vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 9);
  filter: hue-rotate(135deg);
} 
.labi div:nth-child(10) {
  --sz: 20vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 10);
  filter: hue-rotate(150deg);
} 
.labi div:nth-child(11) {
  --sz: 15vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 11);
  filter: hue-rotate(165deg);
} 
.labi div:nth-child(12) {
  --sz: 10vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 12);
  filter: hue-rotate(180deg) brightness(1.5);
}
.labi div:nth-child(13) {
  --sz: 5vmin;
  animation-delay: calc(calc(var(--sp) * 0.07) * 13);
  filter: hue-rotate(195deg) brightness(2);
  box-shadow: 0 0 1vmin 0 var(--bg), -0.25vmin 0.25vmin 1vmin 0 #000b, 0 0 6vmin 0 #fffc inset;
} 
@keyframes twist {
    0% { border-radius: 1%;  transform: rotate(-90deg); }
  100% { border-radius: 50%; transform: rotate(0deg); }
}
</style>

Tutup

Demo dipetik dari codepen/josetxu