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)表示圆球大小回到原来大小 } }
通过上述代码,我们可以实现一个会动的圆球特效,用户可以在页面上看到一个原地跳动的圆球。