css小手

/* CSS代码：创建一个可爱的小手图标 */

.hand {
  width: 50px;
  height: 50px;
  background: linear-gradient(to bottom, #ffcc00 0%, #ffbb00 100%);
  border-radius: 50% 50% 0 0;
  position: relative;
  animation: wave 2s infinite;
}

.hand::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 25%;
  width: 50%;
  height: 10%;
  background-color: #ff9900;
  border-radius: 50%;
}

.hand::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 35%;
  width: 30%;
  height: 5%;
  background-color: #ff9900;
  border-radius: 50%;
}

@keyframes wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

解释说明：

• .hand 类定义了一个类似手掌的形状，使用了 linear-gradient 来创建渐变背景，并通过 border-radius 创建圆润的手掌轮廓。
• ::before 和 ::after 伪元素用于模拟手指部分，通过绝对定位和圆形背景来模拟手指的形态。
• @keyframes wave 定义了一个动画，使手掌看起来像是在挥手，通过旋转来实现波浪效果。

你可以将这段代码添加到你的 HTML 文件中的 <style> 标签内，或者作为一个外部的 CSS 文件引入。然后在 HTML 中使用 <div class="hand"></div> 来展示这个小手图标。