css实现金币下掉效果

CSS可以实现很多酷炫的效果，比如金币下掉效果。下面是实现金币下掉效果的CSS代码：

    .coin {
        position: absolute;
        animation: drop 1s forwards linear;
    }

    @keyframes drop {
        from {
            top: -100px;
        }
        to {
            top: 100%;
        }
    }

在代码中，我们使用了CSS的position属性将金币设置为绝对定位。animation属性用于指定金币的动画效果，其中drop是动画名称，1s是动画持续时间，forwards让动画执行完毕后保持最终状态，linear表示动画按照线性时间函数执行。

接下来，我们定义了一个名为drop的动画，将金币从顶部开始下落到最底部。通过from和to关键帧来定义金币的初始和最终状态。在初始状态下，金币的top属性设置为-100px，即在屏幕顶部之外；最终状态下，top属性设置为100%，即到达屏幕底部。这样，当我们将.coin元素添加到HTML中，并设置其class为coin，金币就会按照我们定义的动画从顶部下落到底部了。