[分享]css3摇一摇动画效果

CSS3摇一摇动画效果是一种非常有趣和有用的动画效果，可以为网站或应用程序增添生动感和活力。下面我们来看一下如何实现这个效果。//HTML: 点击摇一摇 //CSS: .shakebutton { p...

CSS3摇一摇动画效果是一种非常有趣和有用的动画效果，可以为网站或应用程序增添生动感和活力。下面我们来看一下如何实现这个效果。

//HTML:
<button class="shake-button">点击摇一摇</button>

//CSS:
.shake-button {
  padding: 15px 30px;
  font-size: 24px;
  background-color: #29b6f6;
  border: none;
  color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
}

.shake {
  animation: shake 0.3s linear infinite;
}

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

首先在HTML文件中创建一个按钮，并设置一个类名为“shake-button”。

接下来，我们在CSS文件中定义这个按钮的样式，以及一个名为“shake”的动画，duration为0.3秒，使用贝塞尔曲线缓动函数让动画更加自然。

最后，使用@keyframes选择器定义“shake”动画的关键帧，其中设置按钮在不同的时间段内以不同的距离向左或向右移动，产生摇晃的效果。使用translateX来控制按钮在X轴上的移动，同时使用linear来控制动画步调。

最后，我们可以使用JavaScript来监听按钮的点击事件，并给按钮添加“shake”类，启动摇一摇动画效果。

现在，在你的网站或应用程序中增加这种摇一摇效果，让用户获得更加有趣和动感的体验吧！