数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 HTML 和 CSS 实现悬停时按钮抖动效果
要使用 HTML 和 CSS 实现悬停时按钮抖动效果，我们应该对 CSS 动画 和 关键帧 有基本的了解。我们将了解如何利用 CSS 动画和关键帧来在悬停时为按钮应用抖动效果。
在这篇文章中，我们有一些按钮包含在一个 div 容器中。我们的任务是使用 HTML 和 CSS 在悬停时使按钮抖动。
使用 HTML 和 CSS 实现悬停时按钮抖动的步骤
要使用 HTML 和 CSS 实现悬停时按钮抖动，我们将使用 CSS 动画和 transform 属性。我们将按照以下步骤使用 HTML 和 CSS 使按钮在悬停时抖动
- 为了创建按钮，我们使用 HTML button 标签创建了一个按钮，并将其包装在一个 div 元素中，该元素的类名为 container，用于居中按钮。
- 为了居中按钮，我们使用了 display 和 flex 属性，例如 justify-content 用于水平居中，align-items 用于垂直居中按钮并设置容器的 高度。
- 为了设计按钮，我们使用了 btn 类，它设置了 边框、圆角、背景颜色 和文本 颜色。我们还应用了 内边距 和使用 CSS 文本对齐 属性对按钮上书写文本的对齐方式，并设置了按钮的 字体大小。
- 我们使用了 :hover 伪类，它在悬停时设置按钮的背景、文本颜色和动画。
- 我们使用关键帧创建了一个名为 shaking 的动画，它负责按钮的抖动。我们使用了 rotate 函数的 transform 属性，该函数使按钮旋转：在 20% 时旋转 -5 度，在 70% 时旋转 5 度，并在 0%、5% 和 100% 时保持其原始位置，从而产生抖动效果。
示例 1
这是一个完整的示例代码，实现了上述步骤，以使用 HTML 和 CSS 在悬停时使按钮抖动。
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.btn {
text-align: center;
padding: 10px 20px;
border: 1px solid #031926;
border-radius: 5px;
background-color: #031926;
color: white;
font-size: 15px;
}
.btn:hover {
background-color: white;
color: #031926;
animation: shaking 0.3s linear 2;
}
@keyframes shaking {
0%, 50%, 100% {
transform: rotate(0deg);
}
20% {
transform: rotate(-5deg);
}
70% {
transform: rotate(5deg);
}
}
</style>
</head>
<body>
<h3>
Shaking Button on Hover using HTML and CSS
</h3>
<p>
In this example we have used CSS animations
with <strong>rotate</strong> function to
Shake a Button on Hover using HTML and CSS.
</p>
<div class="container">
<button class="btn">Submit</button>
</div>
</body>
</html>
示例 2
在这个示例中，我们创建并设计了三个按钮，与示例 1 中的按钮相同。第一个、第二个和第三个按钮分别在水平、垂直和两个方向上悬停时抖动。
- 我们为每个按钮创建了单独的类，它们是：translatex、translatey 和 trans_rotate。
- translatex 类创建了一个名为 shakingx 的动画，该动画使用 translateX 函数使按钮在水平方向上左右抖动。
- 类似地，translatey 类创建了一个名为 shakingy 的动画，该动画使用 translateY 函数，而 trans_rotate 类创建了一个名为 shakingxy 的动画，该动画使用 translateX 和 rotate 函数使按钮在悬停时抖动。
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
gap: 50px;
}
.btn {
text-align: center;
padding: 10px 20px;
border: 1px solid #031926;
border-radius: 5px;
background-color: #031926;
color: white;
font-size: 15px;
}
.translatex:hover {
background-color: white;
color: #031926;
animation: shakingx 0.4s linear 2;
}
@keyframes shakingx {
0%,90% {
transform: translateX(-10px);
}
20%,80% {
transform: translateX(-5px);
}
50%,70% {
transform: translateX(10px);
}
}
.translatey:hover {
background-color: white;
color: #031926;
animation: shakingy 0.4s linear 2;
}
@keyframes shakingy {
0%,90% {
transform: translateY(-10px);
}
20%,80% {
transform: translateY(-5px);
}
50%,70% {
transform: translateY(10px);
}
}
.trans_rotate:hover {
background-color: white;
color: #031926;
animation: shakingxy 0.4s linear 2;
}
@keyframes shakingxy {
0%,50%,100% {
transform: translateX(0) rotate(0deg);
}
25% {
transform: translateX(15px) rotate(7deg);
}
75% {
transform: translateX(-15px) rotate(-7deg);
}
}
</style>
</head>
<body>
<h3>
Shaking Button on Hover using HTML and CSS
</h3>
<p>
In this example, the <strong>first</strong>
button shake <strong>horizontally</strong>,
the <strong>second</strong> button shake
<strong>vertically</strong>, and the <strong>
third</strong> button in <strong>both</strong>
direction.
</p>
<div class="container">
<button class="btn translatex">Submit</button>
<button class="btn translatey">Submit</button>
<button class="btn trans_rotate">Submit</button>
</div>
</body>
</html>
结论
在这篇文章中，我们了解了如何使用 HTML 和 CSS 在悬停时使按钮抖动。我们使用 CSS 动画和关键帧创建按钮的抖动效果，以及 CSS transform 属性的各种函数，如rotate、translateX 和translateY 函数。
更新于： 2024-09-13
4K+ 浏览量
广告