制作一个js抖动效果
时间: 2024-02-12 20:08:42 浏览: 33
可以使用CSS3的@keyframes和transform属性来实现抖动效果,以下是一个简单的例子:
```html
<!-- HTML -->
<div class="shake">这是一个抖动的元素</div>
```
```css
/* CSS */
.shake {
animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
0% {
transform: translateX(0);
}
10% {
transform: translateX(-10px);
}
20% {
transform: translateX(10px);
}
30% {
transform: translateX(-10px);
}
40% {
transform: translateX(10px);
}
50% {
transform: translateX(-10px);
}
60% {
transform: translateX(10px);
}
70% {
transform: translateX(-10px);
}
80% {
transform: translateX(10px);
}
90% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
```
在上面的例子中,我们定义了一个名为“shake”的CSS类,它使用了@keyframes来定义了一个抖动动画。该动画使用了transform属性来实现元素的平移,使其产生抖动效果。我们将该动画应用在了一个具有“shake”类的div元素上,使其可以产生抖动效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)