Crystal css animation

crystal-css-animation.markdown

Crystal css animation

A Pen by Paweł Targoński on CodePen.

License.

index.pug

.crystal-bg
  .crystal
    .heart
    .heart-2
    .heart-3
    .up-1
    .up-2
    .up-3
    .up-4
    .bottom-1
    .bottom-2
    .bottom-3
    .bottom-4

style.scss

$width: 140;

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.crystal-bg {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  width: 350px;
  height: 550px;
 // background: black;
 // background-image: radial-gradient(circle at 50% 50%, rgba(black, .5), transparent), radial-gradient(circle at 0% 20%, #03FCF6, #476F93, #4D346E);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 1px 3px 1px rgba(black, .6);
  .crystal {
    height: #{$width}px;
    width: #{$width}px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s infinite ease-in-out;
    bottom: 50px;
    div {
      position: absolute;
      box-sizing: border-box;
      width: 0;
      height: 0;
      border-left: #{$width / 2}px solid transparent;
      border-right: #{$width / 2}px solid transparent;
      border-bottom: #{$width}px solid rgba(#ff0000, .1);
    }
    .heart {
      width: 10px;
      height: 10px;
      border: none;
      border-radius: 50%;
      background: #ff0000;
      top: 90%;
      left: 50%;
      box-shadow: 0 0 60px 20px #ff0000;
      animation: shine 2s infinite ease-in-out;
    }
    .heart-2 {
      @extend .heart;
      transform: rotateX(90deg);
    }
    .heart-3 {
      @extend .heart;
      transform: rotateY(90deg);
    }
    .up-1 {
      transform: translateZ(33px) rotateX(30deg);
    }
    .up-2 {
      transform: translateZ(-33px) rotateX(-30deg);
    }
    .up-3 {
      transform: rotateY(90deg) translateZ(33px) rotateX(30deg);
    }
    .up-4 {
      transform: rotateY(90deg) translateZ(-33px) rotateX(-30deg);
    }
    .bottom-1 {
      transform: rotateX(180deg) translateY(-120px) translateZ(-33px) rotateX(-30deg);
    }
    .bottom-2 {
      transform: rotateX(180deg) translateY(-120px) translateZ(33px) rotateX(30deg);
    }
    .bottom-3 {
      transform: rotateY(90deg) rotateX(180deg) translateY(-101px) rotateX(30deg) translateZ(38px);
    }
    .bottom-4 {
      transform: rotateY(90deg) rotateX(180deg) translateY(-101px) rotateX(-30deg) translateZ(-38px);
    }
  }
}

@keyframes rotate {
  50% {
    transform: rotateY(360deg) rotateX(15deg);
  }
}

@keyframes shine {
  50% {
    width: 15px;
    height: 15px;
    box-shadow: 0 0 100px 40px rgba(#ff0000, .8), 0 0 5px 0 #ff0000;
    background: rgba(#ff0000, .8);
  }
}