div 从顶部移动底部,再从底部移动到顶部,且一直触发
时间: 2024-03-03 14:47:20 浏览: 25
您可以使用CSS3的animation属性来实现这个效果。首先需要设置div的起始位置和结束位置,然后通过关键帧来控制div的运动轨迹和动画方式。
下面是一个简单的例子,实现了div从顶部向下运动,再从底部向上运动的效果,并且一直触发动画:
```html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
animation: move 2s infinite;
}
@keyframes move {
0% {top: 0;}
50% {top: calc(100vh - 100px);}
100% {top: 0;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
在上面的代码中,我们设置了一个div元素,初始位置在页面顶部,然后通过animation属性将其绑定到名为“move”的动画上。在关键帧中,我们分别设置了0%、50%和100%时div的位置,从而实现了从顶部向下运动和从底部向上运动的效果。
通过设置animation的infinite属性,我们可以让动画一直不断地循环播放。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)