carousels.scss

@for $i from 1 through 25 {
  @keyframes round#{$i} {
    0% {transform: rotateZ(($i * 14.4) + deg);}
    100% {transform: rotateZ((360 + ($i * 14.4)) + deg);}
  }
}

.header {
    padding: 100px;
}

.main {
    padding: 150px;
}

.carousel {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  margin: 0 auto 200px;
  transform: translateX(50%);
  &__caption {
    width: 900px;
    position: absolute;
    top: -100px;
    left: 0;
    text-align: center;
    transform: translateX(-50%);
    font: 20px Monaco, MonoSpace;
  }
  &__item {
    font: 26px Monaco, MonoSpace;
    height: 200px;
    width: 30px;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: bottom center;
    box-sizing: border-box;
    @for $i from 1 through 25 {
      &--#{$i} {
        transform: rotate(($i * 14.4) + deg);
        animation: round#{$i} 10s linear infinite;
      }
    }
    &--shape1 {
      border-left: 1px solid #000;
    }
    &--shape2 {
      border: 1px solid #000;
      border-radius: 100%;
    }
    &--shape3 {
      border: 1px solid #80f14f;
      outline: 1px solid #696969;
      border-radius: 0 0 100% 100%;
    }
    &--shape4 {
      border-left: 8px solid #d24242;
      background: #9c9696;
      border-radius: 100%;
      &:last-child {
        border-bottom: 8px solid #d24242;
        border-right: 8px solid #d24242;
      }
    }
    &--shape5 {
      border-right: 8px solid yellow;
      background: #c53838;
      border-radius: 100% 0 0 0;
      &:last-child {
        border-right: 8px solid #c53838;
      }
    }
    &--shape6 {
      background: rgba(29, 21, 130, 0.31);
      border-radius: 100% 0 0 0;
    }
    &--shape7 {
      background: rgba(0, 124, 255, 0.24);
      border-radius: 100%;
      border: 1px solid rgba(105, 0, 171, 0.69);
    }
    &--shape8 {
      background: rgba(0, 0, 0, 0.8);
      border-radius: 100%;
      border: 1px solid rgb(255, 255, 255);
      border-right: 5px solid #000;
      &:last-child {
        border-right: none;
      }
    }
    &--shape9 {
      border-radius: 100%;
      border: 3px solid rgb(255, 255, 255);
      border-right: 5px solid rgba(160, 85, 2, 0.5);
    }
    &--shape10 {
      border: 10px solid rgba(255, 171, 247, 0.36);
      border-right: 10px solid rgba(131, 227, 255, 0.41);
      outline: 5px solid rgba(145, 0, 255, 0.22);
      border-radius: 0 0 100% 100%;
    }
    &--shape11 {
      border: 5px solid rgba(255, 164, 149, 0.36);
      border-right: 5px solid rgba(255, 1, 1, 0.41);
      border-bottom: 100px solid rgba(255, 255, 255, 0.34);
      border-radius: 100%;
    }
    &--shape12 {
      border: 10px solid rgba(81, 103, 99, 0.72);
      border-bottom: 30px solid rgb(22, 125, 18);
      border-radius: 0% 100% 100% 100%;
    }
    &--shape13 {
      border: 2px solid rgba(0, 0, 0, 0.78);
      border-bottom: 130px solid rgba(255, 235, 0, 0.75);
      border-radius: 100%;
    }
    &--shape14 {
      border: 15px solid rgba(53, 175, 53, 0.02);
      border-top: 100px solid rgba(45, 206, 186, 0.42);
      background: rgba(255, 0, 33, 0.05);
    }
    &--shape15 {
      border: 185px solid rgba(156, 63, 8, 0.38);
      border-top: 10px solid #efd99f;
      background: rgba(96, 96, 97, 0.48);
      border-left: 0px solid rgba(255, 255, 255, 0.65);
      outline: 10px solid rgba(255, 255, 255, 0.45);
    }
    &--shape16 {
      border: 135px solid rgba(8, 47, 3, 0.38);
      border-top: 170px solid rgb(22, 74, 121);
      background: rgba(4, 0, 177, 0.48);
      border-left: 256px solid rgba(255, 255, 255, 0.65);
      outline: 25px solid rgb(255, 255, 255);
    }
  }
}