jquery小球跳动
时间: 2023-12-30 12:23:49 浏览: 35
以下是一个使用jQuery和CSS3制作的小球跳动的动画特效的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery小球跳动</title>
<style>
.ball {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
animation: jump 1s infinite;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-200px);
}
100% {
transform: translateY(0);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(document).mousemove(function(event) {
var x = event.pageX;
var y = event.pageY;
$('.ball').css({
left: x + 'px',
top: y + 'px'
});
});
});
</script>
</head>
<body>
<div class="ball"></div>
</body>
</html>
```
这个例子中,我们使用了jQuery和CSS3来创建一个小球跳动的动画特效。小球会随着鼠标的移动而移动,并且会在页面上跳动起来。通过设置`animation`属性和`@keyframes`关键帧动画,我们实现了小球的跳动效果。
相关推荐
![](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)