19.按钮收缩动画 & 按钮增长动画 & 按钮摇摆动画 & 按钮边框动画

按钮收缩动画 & 按钮增长动画 & 按钮摇摆动画 & 按钮边框动画

按钮收缩动画

在悬停时创建收缩动画。

• 使用适当的 transition 来为元素的变化设置动画。

• 使用 :hover 伪类将 transform 改为 scale(0.8),在用户悬停在元素上时缩小元素。

<button class="button-shrink">提交</button>

.button-shrink {
 color: #65b5f6;
 background-color: transparent;
 border: 1px solid #65b5f6;
 border-radius: 4px;
 padding: 0 16px;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
 transform: scale(0.8);
}

这个技巧使用 CSS 转换和过渡来创建一个简单但引人注目的悬停效果。以下是它的工作原理:

1. .button-shrink 类设置按钮的基本样式。它有一个透明的背景、一个蓝色的文本颜色和一个匹配的边框。border-radius 属性给按钮圆角,而 padding 在文本周围添加一些空间。cursor: pointer 确保当用户悬停在按钮上时显示正确的光标。

2. transition: all 0.3s ease-in-out 是这个技巧的关键。它告诉浏览器,当按钮的任何属性发生变化时,应该在 0.3 秒内使用 ease-in-out 时序函数设置动画。这创建了一个平滑的过渡效果。

3. .button-shrink:hover 选择器定义了当用户悬停在按钮上时应用的样式。在这种情况下,它使用 transform: scale(0.8) 将按钮缩小到其原始大小的 80%。

当用户将鼠标悬停在按钮上时,按钮会平滑地缩小,给人一种按钮正在响应用户动作的印象。当用户移开鼠标时,按钮会平滑地返回到其原始大小。

这个技巧创建了一个微妙但有效的交互,可以让按钮在视觉上更具吸引力和引导性。它给人一种按钮是可交互的和响应的印象,提高了用户体验。

你可以轻松地定制这个效果以适应你的设计。例如,你可以改变缩放量来创建一个更微妙或更显著的效果,或者调整过渡时间来改变动画的速度。

你也可以将这个技巧与其他效果结合使用,如颜色或阴影的变化,以创建更复杂和引人注目的悬停动画。

按钮增长动画

在悬停时创建增长动画。

• 使用适当的 transition 来为元素的变化设置动画。

• 使用 :hover 伪类将 transform 改为 scale(1.1),在用户悬停在元素上时增大元素。

<button class="button-grow">提交</button>

.button-grow {
 color: #65b5f6;
 background-color: transparent;
 border: 1px solid #65b5f6;
 border-radius: 4px;
 padding: 0 16px;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
}

.button-grow:hover {
 transform: scale(1.1);
}

这个技巧与之前的收缩动画非常相似,但它在悬停时增大元素而不是缩小它。以下是它的工作原理:

1. .button-grow 类设置按钮的基本样式,就像收缩动画一样。它有一个透明的背景、一个蓝色的文本颜色、一个匹配的边框、圆角和一些内边距。cursor: pointer 确保当用户悬停在按钮上时显示正确的光标。

2. transition: all 0.3s ease-in-out 告诉浏览器,当按钮的任何属性发生变化时,应该在 0.3 秒内使用 ease-in-out 时序函数设置动画。这创建了一个平滑的过渡效果。

3. .button-grow:hover 选择器定义了当用户悬停在按钮上时应用的样式。在这种情况下,它使用 transform: scale(1.1) 将按钮放大到其原始大小的 110%。

当用户将鼠标悬停在按钮上时,按钮会平滑地增大,给人一种按钮正在响应用户动作的印象。当用户移开鼠标时,按钮会平滑地返回到其原始大小。

这个效果可以用来表示按钮的重要性或优先级。例如,你可以在主要行动号召按钮上使用增长动画,在次要按钮上使用收缩动画。这可以帮助引导用户完成关键任务。

与收缩动画一样,你可以通过调整缩放量、过渡时间或添加其他效果(如颜色或阴影的变化)来定制这个效果。

然而,请谨慎使用这种效果。过度的动画可能会分散用户的注意力,或使你的UI感觉过于繁忙。确保动画服务于明确的目的,并增强整体用户体验。

此外,请记住可访问性。某些用户可能对动画敏感,或者可能使用辅助技术,这些技术可能无法很好地处理动画元素。总是提供关闭或减少动画的选项,并确保你的按钮在没有任何悬停效果的情况下仍然可用。

按钮摇摆动画

在聚焦时创建摇摆动画。

• 使用适当的 transition 来为元素的变化设置动画。

• 使用 :focus 伪类来应用一个使用 transform 使元素摇摆的 animation。

• 使用 animation-iteration-count 来只播放一次动画。

<button class="button-swing">提交</button>

.button-swing {
 color: #65b5f6;
 background-color: transparent;
 border: 1px solid #65b5f6;
 border-radius: 4px;
 padding: 0 16px;
 cursor: pointer;
 transition: all 0.2s ease-in-out;
}

.button-swing:focus {
 animation: swing 1s ease;
 animation-iteration-count: 1;
}

@keyframes swing {
 15% {
   transform: translateX(5px);
 }
 30% {
   transform: translateX(-5px);
 }
 50% {
   transform: translateX(3px);
 }
 65% {
   transform: translateX(-3px);
 }
 80% {
   transform: translateX(2px);
 }
 100% {
   transform: translateX(0);
 }
}

这个技巧创建了一个有趣的交互效果,当按钮获得焦点时(例如,通过键盘导航),它会播放一个摇摆动画。以下是它的工作原理:

1. .button-swing 类设置按钮的基本样式,就像前面的动画一样。

2. transition: all 0.2s ease-in-out 为按钮的任何属性变化设置了一个短的过渡效果。这使得动画开始和结束时更加平滑。

3. .button-swing:focus 选择器定义了当按钮获得焦点时应用的样式。在这种情况下,它应用了一个名为 swing 的自定义动画,持续 1 秒钟,使用 ease 时序函数。

4. animation-iteration-count: 1 确保动画只播放一次。

5. @keyframes swing 规则定义了自定义动画。它包含几个关键帧,每个关键帧使用 transform: translateX() 将按钮向左或向右移动不同的量。这些关键帧的组合创造了摇摆效果。

当按钮获得焦点时,它会快速向右移动,然后向左摆动,幅度逐渐减小,最终回到其原始位置。这给人一种按钮对用户的操作做出反应的印象。

这种效果可以用来提高可访问性和用户体验。它为那些使用键盘导航你的网站的用户提供了视觉反馈,表明他们已经成功地聚焦在一个元素上。这在复杂的表单或导航系统中特别有用。

像其他动画一样,你可以通过调整关键帧、持续时间或时序函数来定制这个效果。你也可以尝试不同的变换,如 translateY() 或 rotate()，来创建不同风格的摇摆。

然而,请谨慎使用这种效果。过多的动画会分散注意力并引起混乱,特别是对于依赖辅助技术的用户。确保动画是微妙的,并服务于清晰的目的。

此外,请记住,并非所有用户都能看到或欣赏动画。总是为你的按钮提供清晰的视觉样式和适当的可访问性属性,如 aria-label,以确保每个人都能理解和使用它们,无论他们的能力或设置如何。

按钮边框动画

在悬停时创建一个边框动画效果。

• 使用伪元素(:before 和 :after)创建两条线,放置在按钮的顶部和底部边缘。

• 初始将这些线的 scaleX 设置为 0,使它们不可见。

• 在悬停时,使用 transform 将 scaleX 设置为 1,使线可见并创建一个从中心向外扩展的效果。

• 添加 transition 属性以平滑地动画显示这些变化。

<button class="button-border-animation">提交</button>

.button-border-animation {
  position: relative;
  background: none;
  color: #65b5f6;
  border: 2px solid #65b5f6;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  transition: color 0.5s;
  z-index: 1;
}

.button-border-animation:before,
.button-border-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #65b5f6;
  z-index: -1;
  transition: transform 0.5s;
}

.button-border-animation:before {
  top: 0;
  left: 0;
  transform-origin: right;
}

.button-border-animation:after {
  bottom: 0;
  left: 0;
  transform-origin: left;
}

.button-border-animation:hover:before {
  transform: scaleX(0);
  transform-origin: left;
}

.button-border-animation:hover:after {
  transform: scaleX(0);
  transform-origin: right;
}

这个技巧利用伪元素和CSS变换创建一个动态的边框效果。以下是详细解释:

1. .button-border-animation 类定义了按钮的基本样式。注意 background 被设置为 none,因为我们希望按钮是透明的。z-index: 1 确保按钮位于伪元素之上。

2. :before 和 :after 伪元素用于创建位于按钮顶部和底部的线。它们最初是看不见的,因为它们的 scaleX 被设置为 0。

3. :before 伪元素代表顶线。它的 transform-origin 被设置为 right,所以当它的 scaleX 改变时,它似乎从右边缩小。

4. :after 伪元素代表底线。它的 transform-origin 被设置为 left,所以当它的 scaleX 改变时,它似乎从左边缩小。

5. .button-border-animation:hover:before 和 .button-border-animation:hover:after 选择器定义了当鼠标悬停在按钮上时,伪元素的行为。它们将 scaleX 设置为 0,使线消失。注意,transform-origin 在悬停状态下被改变,所以线现在似乎向相反的方向缩小。

当用户将鼠标悬停在按钮上时,顶部和底部的线似乎向内收缩并消失,创建一个有趣的视觉效果。当用户移开鼠标时,线会重新出现,似乎从按钮的中心向外扩展。

这种效果可以为简单的按钮设计增添趣味和互动性。它吸引用户的注意力,并提供视觉反馈,表明按钮是可交互的。

然而,正如其他动画效果一样,请谨慎使用它。过多的动画会分散注意力并导致混乱。确保效果微妙且一致地使用,以增强用户体验,而不是喧宾夺主。

同样重要的是要考虑可访问性。确保按钮在没有任何悬停效果的情况下仍然有清晰的视觉样式和适当的标签,这样所有用户都能理解和使用它,无论他们的能力如何。