[分享]css两个球自由下落

本文介绍如何使用CSS实现两个球自由下落的效果。首先，我们需要创建两个圆形的div，分别用class为“ball1”和“ball2”来进行区分。.ball1{ width: 50px; height:...

本文介绍如何使用CSS实现两个球自由下落的效果。首先，我们需要创建两个圆形的div，分别用class为“ball1”和“ball2”来进行区分。

.ball1{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: red;
    position: absolute;
    top: 0;
}

.ball2{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: blue;
    position: absolute;
    top: 0;
} 

接着，我们需要使用JavaScript来实现两个球的自由下落。在这里我们采用了requestAnimationFrame来实现动画效果。我们使用变量y1和y2来表示两个球的位置，初始值为0。

let y1 = 0;
let y2 = 0;

function render(){
    y1 += 3;
    y2 += 2;
    document.querySelector(".ball1").style.top = y1 + "px";
    document.querySelector(".ball2").style.top = y2 + "px";
    requestAnimationFrame(render);
}

render(); 

我们将上述代码嵌入HTML文件中后，在浏览器中打开，就可以看到两个球在自由下落的过程中不断变化颜色。这是由于我们在render函数中通过Math.random()函数随机生成了球的颜色。

上述代码实现了两个球自由下落的效果，通过修改y1和y2的速度可以调整下落速度。本文介绍了CSS和JavaScript的基础应用，希望能够帮助大家更好地理解前端技术。