blog-web/themes/yilia/source-src/css/waifu.scss

.waifu {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  font-size: 0;
  &:hover {
    transform: translateY(0);
    .waifu-tool {
      display: block;
    }
  }
  .waifu-tips {
    opacity: 0;
    width: 250px;
    height: 70px;
    top: -30px;
    left: 10px;
    padding: 5px 10px;
    border: 1px solid rgba(107, 107, 107, 0.7);
    border-radius: 8px;
    background-color: $colorBg;
    font-size: 13px;
    text-overflow: ellipsis;
    position: absolute;
    transition: opacity .6s;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-name: shake;
    animation-timing-function: ease-in-out;
    &::before {
      content: "";
      position: absolute;
      top: 68px;
      width: 0;
      height: 0;
      left: 20px;
      border-top: 10px rgba(107, 107, 107, 0.7) solid;
      border-left: 7px transparent solid;
      border-right: 7px rgba(107, 107, 107, 0.7) solid;
      border-bottom: 10px transparent solid;
    }
    &::after {
      content: "";
      position: absolute;
      top: 66px;
      width: 0;
      height: 0;
      left: 20px;
      border-top: 10px $colorBg solid;
      border-left: 7px transparent solid;
      border-right: 6px $colorBg solid;
      border-bottom: 10px transparent solid;
    }
  }
  .waifu-tool {
    color: $colorA;
    top: 100px;
    right: 10px;
    font-size: 14px;
    position: absolute;
    span {
      display: block;
      cursor: pointer;
      color: rgb(57, 57, 57);
      background-color: $colorBg;
      border: 1px solid rgb(57, 57, 57);
      border-radius: 5px;
      padding: 0 4px;
      margin-bottom: 4px;
      line-height: 20px;
      transition: 0.2s;
      animation-duration: 30s;
      animation-iteration-count: infinite;
      animation-name: shake;
      animation-timing-function: ease-in-out;
      &:hover {
        z-index: 1;
        transform: scale(1.5);
        animation: none;
      }
    }
  }
  #live2d{
    position: relative;
    cursor: grab;
    &:active {
      cursor: grabbing;
    }
  }
}

@keyframes shake {
  2% {
    transform: translate(0.5px, -1.5px) rotate(-0.5deg);
  }

  4% {
    transform: translate(0.5px, 1.5px) rotate(1.5deg);
  }

  6% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }

  8% {
    transform: translate(2.5px, 1.5px) rotate(0.5deg);
  }

  10% {
    transform: translate(0.5px, 2.5px) rotate(0.5deg);
  }

  12% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }

  14% {
    transform: translate(0.5px, 0.5px) rotate(0.5deg);
  }

  16% {
    transform: translate(-1.5px, -0.5px) rotate(1.5deg);
  }

  18% {
    transform: translate(0.5px, 0.5px) rotate(1.5deg);
  }

  20% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }

  22% {
    transform: translate(0.5px, -1.5px) rotate(1.5deg);
  }

  24% {
    transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
  }

  26% {
    transform: translate(1.5px, 0.5px) rotate(1.5deg);
  }

  28% {
    transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
  }

  30% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }

  32% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  34% {
    transform: translate(2.5px, 2.5px) rotate(-0.5deg);
  }

  36% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }

  38% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }

  40% {
    transform: translate(-0.5px, 2.5px) rotate(0.5deg);
  }

  42% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }

  44% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  46% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }

  48% {
    transform: translate(2.5px, -0.5px) rotate(0.5deg);
  }

  50% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  52% {
    transform: translate(-0.5px, 1.5px) rotate(0.5deg);
  }

  54% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  56% {
    transform: translate(0.5px, 2.5px) rotate(1.5deg);
  }

  58% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg);
  }

  60% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  62% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg);
  }

  64% {
    transform: translate(-1.5px, 1.5px) rotate(1.5deg);
  }

  66% {
    transform: translate(0.5px, 2.5px) rotate(1.5deg);
  }

  68% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  70% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg);
  }

  72% {
    transform: translate(-0.5px, -1.5px) rotate(1.5deg);
  }

  74% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  76% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  78% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }

  80% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  82% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  84% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }

  86% {
    transform: translate(2.5px, 1.5px) rotate(0.5deg);
  }

  88% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg);
  }

  90% {
    transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
  }

  92% {
    transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }

  94% {
    transform: translate(0.5px, 0.5px) rotate(-0.5deg);
  }

  96% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }

  98% {
    transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
  }

  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}