CSS画的小老虎 - 虎虎生威 - 卷轴打开动效

2024-01-03 02:01:25

前言

春节快到了，我们一起用CSS画一只小老虎，让它来给大家拜年吧！

正文

一、CSS画小老虎

首先，我们先用CSS画一个小老虎的头部。

.tiger-head {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
}

.tiger-head-eyes {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 30px;
}

.tiger-head-nose {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 40px;
  left: 45px;
}

.tiger-head-mouth {
  width: 50px;
  height: 10px;
  background-color: black;
  position: absolute;
  top: 60px;
  left: 25px;
}

然后，我们再画一个小老虎的身体。

.tiger-body {
  width: 200px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 0;
}

.tiger-body-stripes {
  width: 10px;
  height: 100px;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  transform: skew(-45deg);
}

最后，我们再画一个小老虎的尾巴。

.tiger-tail {
  width: 50px;
  height: 10px;
  background-color: orange;
  position: absolute;
  top: 150px;
  left: 100px;
}

二、实现动画效果

为了让小老虎动起来，我们可以使用CSS的animation属性。

.tiger-head {
  animation: head-shake 2s infinite alternate;
}

@keyframes head-shake {
  0% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }

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

.tiger-body {
  animation: body-shake 2s infinite alternate;
}

@keyframes body-shake {
  0% {
    transform: translateX(-10px);
  }

  50% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(-10px);
  }
}

.tiger-tail {
  animation: tail-shake 2s infinite alternate;
}

@keyframes tail-shake {
  0% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }

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

三、实现卷轴打开的动效

为了让文章更生动有趣，我们可以使用JavaScript实现卷轴打开的动效。

const scroll = document.getElementById('scroll');

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset;

  if (scrollTop > 100) {
    scroll.classList.add('open');
  } else {
    scroll.classList.remove('open');
  }
});