css正方形弹跳效果
时间: 2023-08-14 17:14:14 浏览: 170
要实现CSS正方形弹跳效果,你可以使用CSS动画和关键帧(@keyframes)来实现。下面是一个简单的示例代码:
HTML:
```html
<div class="square"></div>
```
CSS:
```css
.square {
width: 100px;
height: 100px;
background-color: red;
animation: bounce 1s infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
```
在上面的代码中,我们创建了一个具有`.square`类的`<div>`元素,它代表正方形。我们为该元素设置了宽度、***
阅读全文