文本按钮颤动样式

文本按钮颤动样式是一种常见的用户界面交互效果，可以增强用户体验，增加页面的生动感。

实现方式

文本按钮颤动样式可以通过CSS3的动画效果来实现，主要使用如下两个属性：

• transform: 可以旋转、缩放、倾斜、移动元素；
• animation: 可以创建动画效果。

样式代码

以下是一个实现文本按钮颤动样式的CSS代码片段：

.button {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #0077cc;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  animation: shake 0.5s linear infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

以上代码会使一个class为"button"的元素实现颤动的效果。

解释

• animation: shake 0.5s linear infinite;
  • 设置元素的动画名称为"shake"，时间为0.5秒，变化为线性，无限循环播放。
• @keyframes shake {}
  • 声明一个名为"shake"的动画关键帧。
  • 在0%和100%时，元素坐标不变，也就是原始状态。
  • 在20%、40%、60%和80%时，元素水平移动5px，产生颤动的效果。

使用方法

在HTML中添加一个button元素，并设置class为"button"，可以看到按钮将呈现出颤动的效果：

<button class="button">Click me</button>

小结

文本按钮颤动样式是一个简单而有效的用户界面交互效果，可以增强用户体验。使用CSS3的动画效果可以很容易地实现这种效果，适用于各种网页设计和开发场景。