当先锋百科网

首页 1 2 3 4 5 6 7

CSS3动画是当今Web页面设计中不可或缺的元素之一,它可以为我们的页面增加形式美感和交互感。下面是实现圆球动画特效的代码:

.ball {
background-color: #ff6b6b; // 设置圆球的颜色为红色
width: 50px; // 设置圆球的宽度为50像素
height: 50px; // 设置圆球的高度为50像素
border-radius: 50%; // 设置圆球的边框半径为50%
animation: ball 2s ease-in-out infinite; // 将圆球动画应用于圆球元素上,2s表示动画持续时间,ease-in-out表示动画变化曲线,infinite表示动画持续无限次
}
@keyframes ball {
0% {
transform: translateX(0) scale(1); // 定义圆球的初始状态,translateX(0)表示圆球不发生位移,scale(1)表示圆球大小不发生变化
}
50% {
transform: translateX(200px) scale(2); // 定义圆球的中间状态,translateX(200px)表示圆球向右移动200像素,scale(2)表示圆球变为原来的两倍大小
}
100% {
transform: translateX(0) scale(1); // 定义圆球的最终状态,translateX(0)表示圆球返回到原来的位置,scale(1)表示圆球大小回到原来大小
}
}

通过上述代码,我们可以实现一个会动的圆球特效,用户可以在页面上看到一个原地跳动的圆球。