css、JQuery中实现3个不同颜色的旗帜每点击一下朝纵方向平移放大,三个颜色循环,类似坐在车上两边边树往后移的那种效果,完整代码
时间: 2023-08-13 16:02:18 浏览: 44
以下是一个实现你所述功能的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flag Animation</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.flag-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.flag {
width: 100px;
height: 150px;
margin: 0 10px;
background-color: red;
transform: translateY(0) scale(1);
transition: transform 0.5s ease-in-out;
}
.flag.blue {
background-color: blue;
}
.flag.green {
background-color: green;
}
</style>
</head>
<body>
<div class="flag-container">
<div class="flag red"></div>
<div class="flag blue"></div>
<div class="flag green"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var interval = 2000; // 2 seconds
var currentIndex = 0;
var colors = ["red", "blue", "green"];
function animateFlag() {
var flag = $(".flag").eq(currentIndex);
flag.css("transform", "translateY(-10px) scale(1.1)");
setTimeout(function() {
flag.css("transform", "translateY(0) scale(1)");
currentIndex = (currentIndex + 1) % colors.length;
}, 500);
}
setInterval(animateFlag, interval);
</script>
</body>
</html>
```
在这个示例中,我们创建了一个包含三个旗帜的容器,并使用CSS样式定义了旗帜的外观和初始状态。然后,我们使用jQuery选择器和定时器来实现旗帜的动画效果。在每个定时器周期内,我们将当前旗帜向上平移并放大,然后在一定时间后将其还原到初始状态,并更新当前旗帜的索引以便下一个周期使用不同的颜色。最后,我们将整个动画过程设置为每2秒钟运行一次。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)