html 晃动效果,css3特效(上下左右晃动效果)
时间: 2023-08-22 08:08:58 浏览: 97
要实现 HTML 元素的上下左右晃动效果,可以使用 CSS3 中的 `animation` 属性。
下面是一个示例代码,它会使一个 `div` 元素向上下左右四个方向晃动:
```html
<!DOCTYPE html>
<html>
<head>
<title>晃动效果</title>
<style type="text/css">
@keyframes shake {
0% { transform: translate(0, 0); }
25% { transform: translate(0, -10px); }
50% { transform: translate(-10px, 0); }
75% { transform: translate(0, 10px); }
100% { transform: translate(10px, 0); }
}
.shake {
animation: shake 0.5s infinite;
margin: 50px auto;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="shake"></div>
</body>
</html>
```
在上面的代码中,我们使用 `@keyframes` 定义了一个名为 `shake` 的动画,它包含了五个关键帧,分别对应着元素不同的位置。然后,在 `.shake` 类中,我们使用 `animation` 属性将这个动画应用到了 `div` 元素上,并设置了一些样式,如元素的大小和颜色等。
你可以将 `translate` 属性的值改变为不同的像素值,来调整元素的晃动幅度和方向。