# [博客装修] 1. 博客头像增加猫耳


博客头像增加猫耳

<!--more-->

源码来自 FireFish

适用于 Hugo DoIt 主题，效果为头像增加猫耳。鼠标悬浮时猫耳摆动。

新增于 assets/css/_custom.scss
```scss
// 猫耳  From Misskey && Firefish
@mixin cat-ear-styles {
  &::before,
  &::after {
    background: #ebbcba;
    border: solid 3px #ead9d8;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    height: 50px;
    width: 50px;
  }

  &::before {
    border-radius: 25% 75% 75%;
    transform: rotate(37.5deg) skew(30deg);
  }

  &::after {
    border-radius: 75% 25% 75% 75%;
    transform: rotate(-37.5deg) skew(-30deg);
  }
}

.home {
  .home-profile {
    .home-avatar {
      a {
        position: absolute;
        z-index: 2;
        // overflow: hidden;
        object-fit: cover;
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);

        @include cat-ear-styles;

        &::before,
        &::after {
          height: 48px;
          width: 48px;
          margin-top: 5px;
        }

        &:hover {
          transform: none;
        }

        img {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          top: 0;
          border-radius: 100%;
          z-index: 1;
          overflow: hidden;
          object-fit: cover;

          &:hover {
            position: absolute;
          }
        }
      }

      & {
        height: 120px;

        a:hover::before {
          // transform: translateY(-0.75rem);
          animation: earwiggleleft 1s infinite;
        }

        a:hover::after {
          // transform: translateY(-0.75rem);
          animation: earwiggleright 1s infinite;
        }
      }
    }
  }
}

.single .sponsor .sponsor-avatar {
  @include cat-ear-styles;

  &::before,
  &::after {
    height: 48px;
    width: 48px;
    margin-top: 15px;
  }

  img {
    position: absolute;
    left: calc(50% - 57.5px);
    border-radius: 100%;
    z-index: 1;
    overflow: hidden;
    object-fit: cover;
  }

  & {
    height: 120px;

    &:hover::before {
      // transform: translateY(-0.75rem);
      animation: earwiggleleft 1s infinite;
    }

    &:hover::after {
      // transform: translateY(-0.75rem);
      animation: earwiggleright 1s infinite;
    }
  }
}

// 猫耳悬浮动画
@keyframes earwiggleleft {
  0% {
    transform: rotate(37.6deg) skew(30deg);
  }

  25% {
    transform: rotate(10deg) skew(30deg);
  }

  50% {
    transform: rotate(20deg) skew(30deg);
  }

  75% {
    transform: rotate(0) skew(30deg);
  }

  to {
    transform: rotate(37.6deg) skew(30deg);
  }
}

@keyframes earwiggleright {
  0% {
    transform: rotate(-37.6deg) skew(-30deg);
  }

  30% {
    transform: rotate(-10deg) skew(-30deg);
  }

  55% {
    transform: rotate(-20deg) skew(-30deg);
  }

  75% {
    transform: rotate(0) skew(-30deg);
  }

  to {
    transform: rotate(-37.6deg) skew(-30deg);
  }
}

```

效果：

![](https://cdn.ftls.xyz/images/2024/08/Snipaste_2024-08-22_13-24-3-t.png)