用css+js 实现一个动画:将物体从下向上移动
时间: 2023-11-28 08:49:52 浏览: 42
可以使用CSS的`animation`属性和JavaScript的`classList`属性来实现这个动画。
首先,在HTML中创建一个元素作为物体,例如:
```html
<div id="my-object"></div>
```
然后,在CSS中定义该元素的初始位置和动画:
```css
#my-object {
position: absolute;
bottom: 0;
animation: move-up 1s forwards;
}
@keyframes move-up {
to {
bottom: 100px;
}
}
```
以上代码将元素初始位置设置在底部,然后定义了一个名为`move-up`的动画,将元素从底部移动到距离底部100像素的位置。
接着,在JavaScript中获取该元素并添加一个类名,触发动画:
```js
const myObject = document.getElementById('my-object');
myObject.classList.add('move-up');
```
这里我们定义了一个名为`move-up`的类名,并通过`classList`属性将其添加到元素上,这样元素就会开始执行从下向上移动的动画效果。
完整代码如下:
```html
<style>
#my-object {
position: absolute;
bottom: 0;
animation: move-up 1s forwards;
}
@keyframes move-up {
to {
bottom: 100px;
}
}
</style>
<div id="my-object"></div>
<script>
const myObject = document.getElementById('my-object');
myObject.classList.add('move-up');
</script>
```