【学习】纯CSS实现猫咪动画源代码

源网站代码： 24 Hours Supermarket

---

一、配色

• 背景色（夜色）：$BG_COLOR: #0b2e4e;
• 底部色（大地）：$EARTH_COLOR: #000;
• 超市背景色：$MARKET_WALL_COLOR: #333;
• 月色：$MOONLIGHT_COLOR: #fefec9;
• 文字色：$TIPS_COLOR: #bdf8ff;

---

二、静态物体

2.1. 月亮

月亮光晕

.market_top--moon {
  ...
    
  box-shadow: 0 0 50px 1px $MOONLIGHT_COLOR;
}

2.2. 超市

超市

.container_bottom--market{
  ...
    
  box-shadow: 0 0 100px 1px $MOONLIGHT_COLOR;
  background-color: $MOONLIGHT_COLOR;
}

超市门

.market_bottom--doors {
  .doors {
    .door_item {
      ...
            
      background-color: $MOONLIGHT_COLOR;
      box-shadow: inset 10px 1px $MOONLIGHT_COLOR;
      &::before {
        ...
                
        box-shadow: 0px 0px 10px 1px $MOONLIGHT_COLOR;
      }
    }
  }    
}

2.3. 猫咪

猫咪头部（头+两只耳朵）

.cat--head {
  position: absolute;
  top: -8px;
  right: -10px;

  width: 25px;
  height: 25px;

  border-radius: 50%;

  background-color: $EARTH_COLOR;

  &::before {
    content: "";

    position: absolute;

    top: 0;
    left: 2px;

    width: 10px;
    height: 10px;

    border-radius: 2px;

    background-color: inherit;

    transform: rotate(16deg);
  }

  &::after {
    content: "";

    position: absolute;

    top: 0;
    right: 2px;

    width: 10px;
    height: 10px;

    border-radius: 2px;

    background-color: inherit;

    transform: rotate(-16deg);
   }
 }

猫咪身体

.cat--body {
    width: 46px;
    height: 30px;

    border-radius: 30px;

    background-color: $EARTH_COLOR;
}

猫咪尾巴

.cat--tail {
  position: absolute;
  top: -24px;
  left: -20px;

  width: 30px;
  height: 46px;

  border-radius: 50%;

  border: 7px solid rgba(255, 255, 255, 0);
  border-top-color: #000000;
  border-right-color: #000000;
}

猫咪四条腿

.cat--legs {
  .leg {
    position: absolute;
    bottom: -13px;

    width: 6px;
    height: 20px;

    background-color: $EARTH_COLOR;

    transform-origin: top center;

    border-radius: 3px;

    &:nth-child(1) {
      left: 5px;
      transform: rotate(20deg);
    }

    &:nth-child(2) {
      left: 5px;
      transform: rotate(-20deg);
    }

    &:nth-child(3) {
      right: 5px;
      transform: rotate(-20deg);
    }

    &:nth-child(4) {
      right: 5px;
      transform: rotate(20deg);
    }
  }
}

---

三、关键帧动画

3.1. 月亮移动

.market_top--moon {
  ...
  
  animation: moonMove 360s infinite alternate linear;
}

@keyframes moonMove {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(500px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

3.2. 广告牌

.tips {
  ...

  animation: signboardFlashes 5s infinite alternate linear;
}

@keyframes signboardFlashes {
  0% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  37% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  72% {
    opacity: 0;
  }
  73% {
    opacity: 1;
  }
  74% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

3.3. 超市门

.market_bottom--doors {
  .doors {
  
    .door_item {
    
      &:nth-child(2) {
        animation: doorMovesLeft 20s infinite linear;
      }

      &:nth-child(3) {
        animation: doorMovesRight 20s infinite linear;
      }
    }
  }
}

@keyframes doorMovesLeft {
  0% {
    transform: translateX(0);
  }
  28% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-90%);
  }
  54% {
    transform: translateX(-90%);
  }
  56% {
    transform: translateX(0);
  }
  83% {
    transform: translateX(0);
  }
  85% {
    transform: translateX(-90%);
  }
  97% {
    transform: translateX(-90%);
  }
  99% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes doorMovesRight {
  0% {
    transform: translateX(0);
  }
  28% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(90%);
  }
  54% {
    transform: translateX(90%);
  }
  56% {
    transform: translateX(0);
  }
  83% {
    transform: translateX(0);
  }
  85% {
    transform: translateX(90%);
  }
  97% {
    transform: translateX(90%);
  }
  99% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

3.4.猫咪头部

.cat--head {
  animation: catMovesHead 0.3s infinite alternate linear;
}

@keyframes catMovesHead {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}

3.5. 猫咪尾巴

.cat--tail {
  animation: catMovesTail 0.3s infinite alternate linear;
}

@keyframes catMovesTail {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0);
  }
}

3.6. 猫咪四肢

.legs {
  &:nth-child(1) {
    animation: catMovesLegs 0.6s infinite linear;
  }

  &:nth-child(2) {
    animation: catMovesLegs 0.6s infinite -0.3s linear;
  }

  &:nth-child(3) {
    animation: catMovesLegs 0.6s infinite -0.3s linear;
  }

  &:nth-child(4) {
    animation: catMovesLegs 0.6s infinite linear;
  }
}

@keyframes catMovesLegs {
  0% {
    transform: rotate(36deg);
  }
  50% {
    transform: rotate(-36deg);
  }
  100% {
    transform: rotate(36deg);
  }
}

3.7. 猫咪移动

.cat {
  animation: catRuns 20s infinite linear;
}

@keyframes catRuns {
  0% {
    transform: translateX(0) rotateY(0);
  }
  70% {
    transform: translateX(800px) rotateY(0);
  }
  71% {
    transform: translateX(1000px) rotateY(180deg);
  }
  100% {
    transform: translateX(0) rotateY(180deg);
  }
}

---

四、小结

4.1. CSS相关API

• box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
• animation