<template>
  <section class="rose_base">
    <div v-for="index in 20" :key="index" class="x"></div>
  </section>
</template>

<script>
export default {
  name: "BgCssRose"
}
</script>

<style scoped lang="scss">
.rose_base {

  .x {
    grid-row: 1/-1;
    grid-column: 1/-1;
    border-radius: 12px;
    -webkit-animation: ease 2s alternate infinite;
    animation: ease 2s alternate infinite;
  }

  .x:nth-of-type(1) {
    box-shadow: 0 0 0.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 1.2vmin;
    width: 4vmin;
    height: 4vmin;
    background: #ffede6;
    -webkit-animation-name: x-1;
    animation-name: x-1;
    -webkit-animation-delay: 80ms;
    animation-delay: 80ms;
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
    z-index: 99;
  }

  .x:nth-of-type(2) {
    box-shadow: 0 0 1vmin rgba(0, 0, 0, 0.1);
    border-radius: 1.4vmin;
    width: 8vmin;
    height: 8vmin;
    background: #fedacd;
    -webkit-animation-name: x-2;
    animation-name: x-2;
    -webkit-animation-delay: 160ms;
    animation-delay: 160ms;
    -webkit-transform: rotate(72deg);
    transform: rotate(72deg);
    z-index: 98;
  }

  .x:nth-of-type(3) {
    box-shadow: 0 0 1.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 1.6vmin;
    width: 12vmin;
    height: 12vmin;
    background: #fdc6b5;
    -webkit-animation-name: x-3;
    animation-name: x-3;
    -webkit-animation-delay: 240ms;
    animation-delay: 240ms;
    -webkit-transform: rotate(108deg);
    transform: rotate(108deg);
    z-index: 97;
  }

  .x:nth-of-type(4) {
    box-shadow: 0 0 2vmin rgba(0, 0, 0, 0.1);
    border-radius: 1.8vmin;
    width: 16vmin;
    height: 16vmin;
    background: #fbb09d;
    -webkit-animation-name: x-4;
    animation-name: x-4;
    -webkit-animation-delay: 320ms;
    animation-delay: 320ms;
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
    z-index: 96;
  }

  .x:nth-of-type(5) {
    box-shadow: 0 0 2.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 2vmin;
    width: 20vmin;
    height: 20vmin;
    background: #f99986;
    -webkit-animation-name: x-5;
    animation-name: x-5;
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    z-index: 95;
  }

  .x:nth-of-type(6) {
    box-shadow: 0 0 3vmin rgba(0, 0, 0, 0.1);
    border-radius: 2.2vmin;
    width: 24vmin;
    height: 24vmin;
    background: #f6816f;
    -webkit-animation-name: x-6;
    animation-name: x-6;
    -webkit-animation-delay: 480ms;
    animation-delay: 480ms;
    -webkit-transform: rotate(216deg);
    transform: rotate(216deg);
    z-index: 94;
  }

  .x:nth-of-type(7) {
    box-shadow: 0 0 3.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 2.4vmin;
    width: 28vmin;
    height: 28vmin;
    background: #f36859;
    -webkit-animation-name: x-7;
    animation-name: x-7;
    -webkit-animation-delay: 560ms;
    animation-delay: 560ms;
    -webkit-transform: rotate(252deg);
    transform: rotate(252deg);
    z-index: 93;
  }

  .x:nth-of-type(8) {
    box-shadow: 0 0 4vmin rgba(0, 0, 0, 0.1);
    border-radius: 2.6vmin;
    width: 32vmin;
    height: 32vmin;
    background: #ef4f43;
    -webkit-animation-name: x-8;
    animation-name: x-8;
    -webkit-animation-delay: 640ms;
    animation-delay: 640ms;
    -webkit-transform: rotate(288deg);
    transform: rotate(288deg);
    z-index: 92;
  }

  .x:nth-of-type(9) {
    box-shadow: 0 0 4.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 2.8vmin;
    width: 36vmin;
    height: 36vmin;
    background: #ea342e;
    -webkit-animation-name: x-9;
    animation-name: x-9;
    -webkit-animation-delay: 720ms;
    animation-delay: 720ms;
    -webkit-transform: rotate(324deg);
    transform: rotate(324deg);
    z-index: 91;
  }

  .x:nth-of-type(10) {
    box-shadow: 0 0 5vmin rgba(0, 0, 0, 0.1);
    border-radius: 3vmin;
    width: 40vmin;
    height: 40vmin;
    background: #e61919;
    -webkit-animation-name: x-10;
    animation-name: x-10;
    -webkit-animation-delay: 800ms;
    animation-delay: 800ms;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    z-index: 90;
  }

  .x:nth-of-type(11) {
    box-shadow: 0 0 5.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 3.2vmin;
    width: 44vmin;
    height: 44vmin;
    background: #cc191f;
    -webkit-animation-name: x-11;
    animation-name: x-11;
    -webkit-animation-delay: 880ms;
    animation-delay: 880ms;
    -webkit-transform: rotate(396deg);
    transform: rotate(396deg);
    z-index: 89;
  }

  .x:nth-of-type(12) {
    box-shadow: 0 0 6vmin rgba(0, 0, 0, 0.1);
    border-radius: 3.4vmin;
    width: 48vmin;
    height: 48vmin;
    background: #b41823;
    -webkit-animation-name: x-12;
    animation-name: x-12;
    -webkit-animation-delay: 960ms;
    animation-delay: 960ms;
    -webkit-transform: rotate(432deg);
    transform: rotate(432deg);
    z-index: 88;
  }

  .x:nth-of-type(13) {
    box-shadow: 0 0 6.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 3.6vmin;
    width: 52vmin;
    height: 52vmin;
    background: #9b1724;
    -webkit-animation-name: x-13;
    animation-name: x-13;
    -webkit-animation-delay: 1040ms;
    animation-delay: 1040ms;
    -webkit-transform: rotate(468deg);
    transform: rotate(468deg);
    z-index: 87;
  }

  .x:nth-of-type(14) {
    box-shadow: 0 0 7vmin rgba(0, 0, 0, 0.1);
    border-radius: 3.8vmin;
    width: 56vmin;
    height: 56vmin;
    background: #841524;
    -webkit-animation-name: x-14;
    animation-name: x-14;
    -webkit-animation-delay: 1120ms;
    animation-delay: 1120ms;
    -webkit-transform: rotate(504deg);
    transform: rotate(504deg);
    z-index: 86;
  }

  .x:nth-of-type(15) {
    box-shadow: 0 0 7.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 4vmin;
    width: 60vmin;
    height: 60vmin;
    background: #6c1322;
    -webkit-animation-name: x-15;
    animation-name: x-15;
    -webkit-animation-delay: 1200ms;
    animation-delay: 1200ms;
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
    z-index: 85;
  }

  .x:nth-of-type(16) {
    box-shadow: 0 0 8vmin rgba(0, 0, 0, 0.1);
    border-radius: 4.2vmin;
    width: 64vmin;
    height: 64vmin;
    background: #56101e;
    -webkit-animation-name: x-16;
    animation-name: x-16;
    -webkit-animation-delay: 1280ms;
    animation-delay: 1280ms;
    -webkit-transform: rotate(576deg);
    transform: rotate(576deg);
    z-index: 84;
  }

  .x:nth-of-type(17) {
    box-shadow: 0 0 8.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 4.4vmin;
    width: 68vmin;
    height: 68vmin;
    background: #3f0d19;
    -webkit-animation-name: x-17;
    animation-name: x-17;
    -webkit-animation-delay: 1360ms;
    animation-delay: 1360ms;
    -webkit-transform: rotate(612deg);
    transform: rotate(612deg);
    z-index: 83;
  }

  .x:nth-of-type(18) {
    box-shadow: 0 0 9vmin rgba(0, 0, 0, 0.1);
    border-radius: 4.6vmin;
    width: 72vmin;
    height: 72vmin;
    background: #2a0912;
    -webkit-animation-name: x-18;
    animation-name: x-18;
    -webkit-animation-delay: 1440ms;
    animation-delay: 1440ms;
    -webkit-transform: rotate(648deg);
    transform: rotate(648deg);
    z-index: 82;
  }

  .x:nth-of-type(19) {
    box-shadow: 0 0 9.5vmin rgba(0, 0, 0, 0.1);
    border-radius: 4.800000000000001vmin;
    width: 76vmin;
    height: 76vmin;
    background: #15050a;
    -webkit-animation-name: x-19;
    animation-name: x-19;
    -webkit-animation-delay: 1520ms;
    animation-delay: 1520ms;
    -webkit-transform: rotate(684deg);
    transform: rotate(684deg);
    z-index: 81;
  }

  .x:nth-of-type(20) {
    box-shadow: 0 0 10vmin rgba(0, 0, 0, 0.1);
    border-radius: 5vmin;
    width: 80vmin;
    height: 80vmin;
    background: #000;
    -webkit-animation-name: x-20;
    animation-name: x-20;
    -webkit-animation-delay: 1600ms;
    animation-delay: 1600ms;
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
    z-index: 80;
  }

}

@-webkit-keyframes x-1 {
  to {
    -webkit-transform: rotate(36deg) scale(0.6);
    transform: rotate(36deg) scale(0.6);
  }
}

@keyframes x-1 {
  to {
    -webkit-transform: rotate(36deg) scale(0.6);
    transform: rotate(36deg) scale(0.6);
  }
}

@-webkit-keyframes x-2 {
  to {
    -webkit-transform: rotate(72deg) scale(0.6);
    transform: rotate(72deg) scale(0.6);
  }
}

@keyframes x-2 {
  to {
    -webkit-transform: rotate(72deg) scale(0.6);
    transform: rotate(72deg) scale(0.6);
  }
}

@-webkit-keyframes x-3 {
  to {
    -webkit-transform: rotate(108deg) scale(0.6);
    transform: rotate(108deg) scale(0.6);
  }
}

@keyframes x-3 {
  to {
    -webkit-transform: rotate(108deg) scale(0.6);
    transform: rotate(108deg) scale(0.6);
  }
}

@-webkit-keyframes x-4 {
  to {
    -webkit-transform: rotate(144deg) scale(0.6);
    transform: rotate(144deg) scale(0.6);
  }
}

@keyframes x-4 {
  to {
    -webkit-transform: rotate(144deg) scale(0.6);
    transform: rotate(144deg) scale(0.6);
  }
}

@-webkit-keyframes x-5 {
  to {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
}

@keyframes x-5 {
  to {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
}

@-webkit-keyframes x-6 {
  to {
    -webkit-transform: rotate(216deg) scale(0.6);
    transform: rotate(216deg) scale(0.6);
  }
}

@keyframes x-6 {
  to {
    -webkit-transform: rotate(216deg) scale(0.6);
    transform: rotate(216deg) scale(0.6);
  }
}

@-webkit-keyframes x-7 {
  to {
    -webkit-transform: rotate(252deg) scale(0.6);
    transform: rotate(252deg) scale(0.6);
  }
}

@keyframes x-7 {
  to {
    -webkit-transform: rotate(252deg) scale(0.6);
    transform: rotate(252deg) scale(0.6);
  }
}

@-webkit-keyframes x-8 {
  to {
    -webkit-transform: rotate(288deg) scale(0.6);
    transform: rotate(288deg) scale(0.6);
  }
}

@keyframes x-8 {
  to {
    -webkit-transform: rotate(288deg) scale(0.6);
    transform: rotate(288deg) scale(0.6);
  }
}

@-webkit-keyframes x-9 {
  to {
    -webkit-transform: rotate(324deg) scale(0.6);
    transform: rotate(324deg) scale(0.6);
  }
}

@keyframes x-9 {
  to {
    -webkit-transform: rotate(324deg) scale(0.6);
    transform: rotate(324deg) scale(0.6);
  }
}

@-webkit-keyframes x-10 {
  to {
    -webkit-transform: rotate(360deg) scale(0.6);
    transform: rotate(360deg) scale(0.6);
  }
}

@keyframes x-10 {
  to {
    -webkit-transform: rotate(360deg) scale(0.6);
    transform: rotate(360deg) scale(0.6);
  }
}

@-webkit-keyframes x-11 {
  to {
    -webkit-transform: rotate(396deg) scale(0.6);
    transform: rotate(396deg) scale(0.6);
  }
}

@keyframes x-11 {
  to {
    -webkit-transform: rotate(396deg) scale(0.6);
    transform: rotate(396deg) scale(0.6);
  }
}

@-webkit-keyframes x-12 {
  to {
    -webkit-transform: rotate(432deg) scale(0.6);
    transform: rotate(432deg) scale(0.6);
  }
}

@keyframes x-12 {
  to {
    -webkit-transform: rotate(432deg) scale(0.6);
    transform: rotate(432deg) scale(0.6);
  }
}

@-webkit-keyframes x-13 {
  to {
    -webkit-transform: rotate(468deg) scale(0.6);
    transform: rotate(468deg) scale(0.6);
  }
}

@keyframes x-13 {
  to {
    -webkit-transform: rotate(468deg) scale(0.6);
    transform: rotate(468deg) scale(0.6);
  }
}

@-webkit-keyframes x-14 {
  to {
    -webkit-transform: rotate(504deg) scale(0.6);
    transform: rotate(504deg) scale(0.6);
  }
}

@keyframes x-14 {
  to {
    -webkit-transform: rotate(504deg) scale(0.6);
    transform: rotate(504deg) scale(0.6);
  }
}

@-webkit-keyframes x-15 {
  to {
    -webkit-transform: rotate(540deg) scale(0.6);
    transform: rotate(540deg) scale(0.6);
  }
}

@keyframes x-15 {
  to {
    -webkit-transform: rotate(540deg) scale(0.6);
    transform: rotate(540deg) scale(0.6);
  }
}

@-webkit-keyframes x-16 {
  to {
    -webkit-transform: rotate(576deg) scale(0.6);
    transform: rotate(576deg) scale(0.6);
  }
}

@keyframes x-16 {
  to {
    -webkit-transform: rotate(576deg) scale(0.6);
    transform: rotate(576deg) scale(0.6);
  }
}

@-webkit-keyframes x-17 {
  to {
    -webkit-transform: rotate(612deg) scale(0.6);
    transform: rotate(612deg) scale(0.6);
  }
}

@keyframes x-17 {
  to {
    -webkit-transform: rotate(612deg) scale(0.6);
    transform: rotate(612deg) scale(0.6);
  }
}

@-webkit-keyframes x-18 {
  to {
    -webkit-transform: rotate(648deg) scale(0.6);
    transform: rotate(648deg) scale(0.6);
  }
}

@keyframes x-18 {
  to {
    -webkit-transform: rotate(648deg) scale(0.6);
    transform: rotate(648deg) scale(0.6);
  }
}

@-webkit-keyframes x-19 {
  to {
    -webkit-transform: rotate(684deg) scale(0.6);
    transform: rotate(684deg) scale(0.6);
  }
}

@keyframes x-19 {
  to {
    -webkit-transform: rotate(684deg) scale(0.6);
    transform: rotate(684deg) scale(0.6);
  }
}

@-webkit-keyframes x-20 {
  to {
    -webkit-transform: rotate(720deg) scale(0.6);
    transform: rotate(720deg) scale(0.6);
  }
}

@keyframes x-20 {
  to {
    -webkit-transform: rotate(720deg) scale(0.6);
    transform: rotate(720deg) scale(0.6);
  }
}

/*

body {
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #000;
  -webkit-perspective: 500px;
  perspective: 500px;
}
*/

</style>
