.ball1{ position: absolute; width: 200px; height: 200px; top: 100px; left: 0px; background: url("images/篮球.jpeg") no-repeat 0 0; border-radius: 200px; background-size:cover; animation: rotate 5s linear 1s 1; } .ball2{ position: absolute; top:0px; left:200px; } .ball3{ position: absolute; top: 100px; left: 0px; width: 200px; height: 200px; } .ball4{ animation: move 5s ; animation-fill-mode: forwards; }

这是一段 CSS 代码，其中包含了四个类名分别为 ball1、ball2、ball3 和 ball4 的元素。其中 ball1 元素是一个宽高为 200px 的圆形图片，通过设置背景图片和 `border-radius` 属性实现。该元素还通过 `animation` 属性设置了一个名为 `rotate` 的旋转动画，该动画会在 1s 后开始播放，持续时间为 5s，采用线性变化。ball2 元素位于 ball1 元素的右侧顶部，ball3 元素与 ball1 元素重叠，但没有设置背景图片。ball4 元素通过 `animation` 属性设置了一个名为 `move` 的动画。该动画没有指定持续时间，因此默认为 0s，但通过设置 `animation-fill-mode` 属性为 `forwards`，实现了在动画结束后保持动画最后一帧状态的效果。