js点击按钮使得按钮上下浮动
时间: 2023-09-05 13:09:59 浏览: 56
你可以使用CSS的动画属性来实现按钮浮动的效果。具体可以按照以下步骤进行:
1. 首先,在CSS中定义一个浮动动画,例如:
```css
@keyframes floating {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-10px);
}
100% {
transform: translatey(0px);
}
}
```
这里定义了一个名为"floating"的动画,它将按钮向上移动10像素,然后再移动回原位置。
2. 在按钮的CSS样式中,指定动画的名称、持续时间、循环次数等属性,例如:
```css
button {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
}
```
这里将按钮的动画名称设置为"floating",持续时间为3秒,循环次数为无限循环。
3. 最后,在HTML中添加一个按钮元素,例如:
```html
<button>点击我浮动</button>
```
这样就可以通过点击按钮来触发浮动动画了。
完整的代码示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>按钮浮动动画</title>
<style>
@keyframes floating {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-10px);
}
100% {
transform: translatey(0px);
}
}
button {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<button>点击我浮动</button>
</body>
</html>
```