CSS3弹跳小球运动效果
warning:
这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。
/* 定义弹跳小球的基本样式 */
.ball {
width: 50px;
height: 50px;
background-color: #FF6F3F;
border-radius: 50%; /* 使小球形状为圆形 */
position: absolute; /* 绝对定位，用于在容器中移动小球 */
top: 0; /* 初始位置 */
left: 0; /* 初始位置 */
animation: bounce 2s infinite alternate; /* 应用弹跳动画 */
}
/* 定义弹跳动画 */
@keyframes bounce {
from {
transform: translate(0, 0); /* 动画开始时小球在原点 */
}
to {
transform: translate(200px, 200px); /* 动画结束时小球移动到(200px, 200px)的位置 */
}
}这段代码定义了一个名为.ball的类，它将应用于HTML中的元素，以创建一个弹跳的小球效果。@keyframes规则定义了名为bounce的动画，使得小球在2秒内从原点移动到(200px, 200px)的位置，并且这个动画会无限次数地循环执行，每次执行的动画效果都会交替（alternate）。
评论已关闭