挥洒创意，纯CSS3打造可爱摇头晃脑的小哥

2024-02-14 12:18:53







## **纯CSS3写一个摇头晃脑的小哥** 

对于初学者来说，学习前端开发是一件很有趣的事情。前端开发可以让你在网页上实现各种有趣的效果，比如动画、交互、游戏等等。今天，我们就来学习如何使用纯CSS3来制作一个摇头晃脑的小哥。

### **第一步：创建基本结构** 

首先，我们需要创建一个基本的HTML结构。这个结构将包含一个`<div>`元素，它将作为小哥的身体。在`<div>`元素内部，我们将添加一个`<div>`元素，它将作为小哥的头。最后，在`<head>`元素中，我们将添加一个`<style>`元素，它将包含用于创建动画的CSS代码。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #ffffff;
    }

    .container {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      position: relative;
    }

    .head {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
      border-radius: 50%;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="head"></div>
  </div>
</body>
</html>

第二步：添加动画效果

现在，我们需要添加一些CSS代码来让小哥摇头晃脑。首先，我们将为小哥的身体添加一个动画，让它上下移动。然后，我们将为小哥的头添加一个动画，让它左右晃动。

.container {
  animation: shake 1s infinite;
}

.head {
  animation: nod 1s infinite;
}

@keyframes shake {
  0% {
    top: 50px;
  }

  50% {
    top: 70px;
  }

  100% {
    top: 50px;
  }
}

@keyframes nod {
  0% {
    left: 50px;
  }

  50% {
    left: 40px;
  }

  100% {
    left: 50px;
  }
}

第三步：自定义角色的外观

最后，我们可以自定义小哥的外观。我们可以改变小哥的身体颜色、头发颜色、眼睛颜色等等。

.body {
  background-color: #ff0000;
}

.head {
  background-color: #ffffff;
}

.eyes {
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
  position: absolute;
  top: 40px;
  left: 40px;
}

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