用CSS绘制快乐小粽子：端午安康！

端午安康：用CSS绘制一个快乐的小粽子

端午节临近，一个用纯CSS绘制的快乐小粽子送给大家。它用HTML和CSS3实现，生动有趣。

HTML结构

<div class="粽子">
  <div class="粽叶">
    <div class="爱心"></div>
  </div>
  <div class="粽子主体">
    <div class="小手"></div>
    <div class="小脚"></div>
  </div>
</div>

CSS样式

.粽子 {
  width: 200px;
  height: 300px;
  background-color: #481400;
  position: relative;
}

.粽叶 {
  width: 100px;
  height: 200px;
  background-color: #75B46A;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.爱心 {
  width: 50px;
  height: 50px;
  background-color: #FF0000;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: heartbeat 1s infinite alternate;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.粽子主体 {
  width: 100px;
  height: 100px;
  background-color: #F9E47A;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
}

.小手 {
  width: 20px;
  height: 20px;
  background-color: #75B46A;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: handwave 1s infinite alternate;
}

@keyframes handwave {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.小脚 {
  width: 20px;
  height: 20px;
  background-color: #75B46A;
  position: absolute;
  bottom: 20px;
  left: 20px;
  animation: foottap 1s infinite alternate;
}

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

结语

这个小粽子将端午节的喜庆和欢乐带到了您的屏幕上。用CSS绘制的动画使其栩栩如生，用纯代码实现了节日的祝福。

在这个特别的节日里，愿您被快乐和好运包围。端午安康！