毛怪萨利CSS特效：惊险刺激的视觉盛宴

2023-10-16 00:44:24

CSS3动画之毛怪萨利

毛怪萨利是《怪兽电力公司》中广受欢迎的毛茸茸的蓝色怪物。如果你想在你的网站上重现这个可爱的角色，那么你可以使用CSS3动画来实现。

1.1 绘制毛怪萨利的身体

.sully-body {
  width: 400px;
  height: 500px;
  background-color: #0000ff;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 100px;
}

1.2 创建毛怪萨利的毛发

要创建毛怪萨利的毛发，我们将使用CSS的radial-gradient()函数。

.sully-fur {
  background: radial-gradient(circle, #0000ff 0%, #000080 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

1.3 添加毛怪萨利的眼睛

.sully-eyes {
  position: absolute;
  top: 100px;
  left: 150px;
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50%;
}

1.4 创建毛怪萨利的嘴巴

.sully-mouth {
  position: absolute;
  top: 200px;
  left: 175px;
  width: 100px;
  height: 50px;
  background-color: #ff0000;
  border-radius: 50%;
}

1.5 让毛怪萨利动起来

现在，让我们让毛怪萨利动起来。

@keyframes sully-walk {
  0% {
    left: 100px;
  }

  100% {
    left: 500px;
  }
}

.sully-body {
  animation: sully-walk 5s infinite;
}

大功告成！现在你已经学会了如何使用CSS3动画来创建毛怪萨利了。你可以将这个角色添加到你的网站上，让它为你的访客带来惊喜和乐趣。

2. 更多CSS毛怪萨利创意

除了以上的基本教程之外，你还可以使用CSS来创建更复杂的毛怪萨利动画。例如，你可以让毛怪萨利跳舞、说话，甚至做出一些有趣的动作。

2.1 毛怪萨利跳舞

@keyframes sully-dance {
  0% {
    top: 100px;
  }

  25% {
    top: 50px;
  }

  50% {
    top: 100px;
  }

  75% {
    top: 150px;
  }

  100% {
    top: 100px;
  }
}

.sully-body {
  animation: sully-dance 5s infinite;
}

2.2 毛怪萨利说话

@keyframes sully-talk {
  0% {
    mouth-width: 100px;
  }

  50% {
    mouth-width: 50px;
  }

  100% {
    mouth-width: 100px;
  }
}

.sully-mouth {
  animation: sully-talk 2s infinite;
}

2.3 毛怪萨利做动作

@keyframes sully-action {
  0% {
    left: 100px;
    top: 100px;
  }

  25% {
    left: 200px;
    top: 50px;
  }

  50% {
    left: 300px;
    top: 100px;
  }

  75% {
    left: 400px;
    top: 150px;
  }

  100% {
    left: 500px;
    top: 100px;
  }
}

.sully-body {
  animation: sully-action 10s infinite;
}