html和css如何制作小球,纯CSS动画打造~会动的小球
时间: 2024-01-03 21:05:33 浏览: 34
好的,让我来回答您的问题。以下是一些示例 CSS 代码,可以用来制作一个简单的小球动画:
HTML 代码:
```html
<div class="ball"></div>
```
CSS 代码:
```css
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: relative;
animation: bounce 1s infinite;
}
@keyframes bounce {
0% {
top: 0;
}
50% {
top: 200px;
}
100% {
top: 0;
}
}
```
这段代码会创建一个大小为 50x50 像素的红色小球,它会在页面上弹跳。我们使用 `border-radius` 属性将它的形状设置为圆形。我们使用 `position: relative` 和 `top` 属性来控制小球的位置,并使用 `@keyframes` 规则创建了一个简单的弹跳动画。
希望这个回答能够帮助到您!
相关问题
用css做一个小球融入大盒子动画效果
好的,以下是一个简单的实现方法:
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%);
animation: ball-in 2s ease-in-out forwards;
}
@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(1);
}
}
```
在这个例子中,我们使用了 CSS3 动画来实现小球缓慢地融入大盒子的效果。关键是使用了 `transform` 属性,将小球的初始大小设置为 0.2,然后在动画中逐渐放大到 1.2,最后回到 1 的大小,使得小球看起来像是逐渐融入了大盒子中。同时,我们使用了 `forwards` 属性来保持动画完成后的状态,即小球停留在大盒子中央。
用css做一个小球不间断融入右侧盒子动画效果
好的,以下是一个实现方法:
HTML部分:
```html
<div class="container">
<div class="ball"></div>
<div class="box"></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;
}
.box {
width: 150px;
height: 150px;
background-color: #ccc;
position: absolute;
top: 50%;
right: -75px;
transform: translateY(-50%);
}
@keyframes ball-in {
0% {
transform: translate(-50%, -50%) scale(0.2);
}
50% {
transform: translate(50%, -50%) scale(1.2);
}
100% {
transform: translate(150%, -50%) scale(0.2);
}
}
```
在这个例子中,我们使用了 CSS3 动画来实现小球不间断地融入右侧盒子的效果。关键是使用了 `transform` 属性,将小球的初始大小设置为 0.2,然后在动画中逐渐放大到 1.2,最后移动到右侧盒子内部并缩小到最小,使得小球看起来像是不断地在融入右侧盒子中。同时,我们使用了 `translate` 属性来控制小球的移动,在动画中将小球从中心移动到右侧盒子内部。