页脚颤动

作为程序员，我们经常需要为网站添加一些动态特效来提高用户体验，其中一页脚颤动效果是非常流行的一种特效。它通常被用于显示网站的版权信息、联系方式或者其他重要的信息。本文将介绍如何实现一个简单的页脚颤动效果。

HTML结构

我们需要先搭建一个基本的HTML结构，如下所示：

<footer>
  <div class="container">
    <div class="footer-content">
      <p>Copyright © 2021</p>
      <p>All Rights Reserved</p>
    </div>
  </div>
</footer>

注意到这里我们使用了footer元素作为页脚的容器，并为其添加了一个内部容器container以及一个内容容器footer-content。我们将在下一步中使用CSS来添加样式。

CSS样式

为了让页脚晃动起来，我们需要定义一些CSS样式。CSS样式如下：

footer {
  background-color: #ccc;
  padding: 50px 0;
  position: relative;
}

.container {
  position: relative;
  height: 150px;
}

.footer-content {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: shake 0.8s ease-in-out infinite;
}

@keyframes shake {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  20% {
    transform: translateX(-50%) rotate(-10deg);
  }
  40% {
    transform: translateX(-50%) rotate(10deg);
  }
  60% {
    transform: translateX(-50%) rotate(-10deg);
  }
  80% {
    transform: translateX(-50%) rotate(10deg);
  }
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}

这里我们定义了footer元素的背景颜色、padding以及相对定位，以及内部容器container的高度和相对定位。而footer-content则定义了相对于父元素底部、居中对齐，并且使用了CSS动画shake，这是一个无限循环的动画，实现了页脚颤动的效果。

结束语

现在，我们已经成功地实现了一个简单的页脚颤动效果。通过合理地运用CSS动画，我们可以为网站添加更多的动态特效，提高用户体验。