小兔来报喜，送你最暖的新春祝福！

前端

2024-01-02 05:37:50

送你一只守护兔，温暖每一个你

兔年将至，寓意着吉祥与幸福。在这辞旧迎新的时刻，我们想送你一只守护兔，愿它陪伴你度过每一个温暖的瞬间。

守护兔的由来

这只守护兔，有着粉红色的耳朵和大大的眼睛，还有毛茸茸的身体，摸起来十分舒服。它最喜欢做的事就是在你身边跳来跳去，用它那大大的眼睛注视着你。

当你在伤心的时候，守护兔会用它的头轻轻地蹭蹭你，安慰你。当你在开心的时候，守护兔会用它那欢快的尾巴摇来摇去，和你一起庆祝。

这只守护兔，并不厉害，它不能飞天遁地，也不能力拔山河，但它有一颗勇敢的心。即使失败了，小小的它也会再度勇敢站起来，保护自己的朋友们。

画一只表情丰富的动态兔子

如果你想拥有这样一只守护兔，可以尝试用【html5，css3】自己画一只。

首先，你需要用html创建一个简单的页面，然后用css3添加样式。

<!DOCTYPE html>
<html>
<head>

<style>
body {
  background-color: #ffffff;
}
.rabbit {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
.rabbit-ears {
  width: 60px;
  height: 100px;
  background-color: #ffffff;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -30px;
}
.rabbit-ears-left {
  transform: rotate(-45deg);
}
.rabbit-ears-right {
  transform: rotate(45deg);
}
.rabbit-eyes {
  width: 20px;
  height: 20px;
  background-color: #000000;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -10px;
}
.rabbit-eyes-left {
  margin-left: -30px;
}
.rabbit-eyes-right {
  margin-left: 30px;
}
.rabbit-mouth {
  width: 50px;
  height: 50px;
  background-color: #ff0000;
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -25px;
}
</style>
</head>
<body>
<div class="rabbit">
  <div class="rabbit-ears">
    <div class="rabbit-ears-left"></div>
    <div class="rabbit-ears-right"></div>
  </div>
  <div class="rabbit-eyes">
    <div class="rabbit-eyes-left"></div>
    <div class="rabbit-eyes-right"></div>
  </div>
  <div class="rabbit-mouth"></div>
</div>
</body>
</html>

然后，你需要用javascript添加动画效果。

var rabbit = document.querySelector('.rabbit');

rabbit.addEventListener('mousemove', function(e) {
  var x = e.clientX - rabbit.offsetLeft;
  var y = e.clientY - rabbit.offsetTop;

  var angle = Math.atan2(y, x) * 180 / Math.PI;

  rabbit.style.transform = 'rotate(' + angle + 'deg)';
});