漫步前行：CSS3 实现的趣味创意效果

2024-01-20 07:15:14

在网页设计中，添加引人入胜的动画效果是一种让网站脱颖而出的好方法。CSS3 漫步前行效果就是这样一种动态效果，它给人一种缓慢移动的错觉，就像漫步一样。本文将一步一步地演示如何使用 CSS3 实现这个效果，并提供详细的步骤和示例代码，帮助您将这种有趣的视觉效果添加到您的网页设计中。

1. HTML 结构：

<div class="walking-person">
  <div class="head"></div>
  <div class="body"></div>
  <div class="arms">
    <div class="left-arm"></div>
    <div class="right-arm"></div>
  </div>
  <div class="legs">
    <div class="left-leg"></div>
    <div class="right-leg"></div>
  </div>
</div>

2. CSS 样式：

.walking-person {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.body {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 20px;
  height: 40px;
  background-color: black;
  transform: translate(-50%, -50%);
}

.arms {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 40px;
  height: 20px;
  transform: translate(-50%, -50%);
}

.left-arm {
  position: absolute;
  left: 0;
  width: 20px;
  height: 10px;
  background-color: black;
}

.right-arm {
  position: absolute;
  right: 0;
  width: 20px;
  height: 10px;
  background-color: black;
}

.legs {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

.left-leg {
  position: absolute;
  left: 0;
  width: 10px;
  height: 20px;
  background-color: black;
}

.right-leg {
  position: absolute;
  right: 0;
  width: 10px;
  height: 20px;
  background-color: black;
}

@keyframes walking {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}

.walking-person {
  animation: walking 1s infinite alternate;
}