用css做一个小球不间断融入大盒子动画效果
时间: 2024-01-29 13:03:46 浏览: 37
好的,以下是一个实现方法:
HTML部分:
```html
<div class="container">
<div class="ball"></div>
</div>
```
CSS部分:
```css
.container {
width: 500px;
height: 500px;
background-color: #f2f2f2;
position: relative;
}
.ball {
width: 50px;
height: 50px;
background-color: #ff9900;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.2);
animation: ball-in 2s ease-in-out infinite;
}
@keyframes ball-in {
0% {
transform: translate(-50%, -50%) scale(0.2);
}
50% {
transform: translate(-50%, -50%) scale(1.2);
}
100% {
transform: translate(-50%, -50%) scale(0.2);
}
}
```
在这个例子中,我们使用了 CSS3 动画来实现小球不间断地融入大盒子的效果。关键是使用了 `infinite` 属性,将动画设置为无限播放,使得小球不断地从大盒子中心缩小到最小,再放大到最大,然后再次缩小到最小,如此循环。同时,我们使用了 `transform` 属性,将小球的初始大小设置为 0.2,然后在动画中逐渐放大到 1.2,最后回到 0.2 的大小,使得小球看起来像是不断地在融入大盒子中。
相关推荐
![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)