css动画让小草抖动

在网页设计中，CSS动画是非常重要的一部分。今天我们来学习如何让草叶使用CSS动画进行抖动。

    /* 定义草叶样式 */
    .grass {
        width: 60px;
        height: 40px;
        background-color: green;
        position: relative;
        overflow: hidden;
    }
    /* 定义草叶的抖动动画 */
    @keyframes shake {
        0% {transform: rotateZ(0);}
        10% {transform: rotateZ(-5deg);}
        20% {transform: rotateZ(10deg);}
        30% {transform: rotateZ(-10deg);}
        40% {transform: rotateZ(5deg);}
        50% {transform: rotateZ(-5deg);}
        60% {transform: rotateZ(0);}
        100% {transform: rotateZ(0);}
    }
    /* 应用草叶抖动动画 */
    .grass img {
        position: absolute;
        top: -10px;
        left: 10px;
        transform-origin: bottom center;
        animation: shake 1s ease infinite;
    }

首先我们定义了草叶的样式，包括它的大小、颜色和位置。接下来，我们定义了草叶的抖动动画，使用了关键帧（@keyframes）方式进行定义，并设置了抖动的幅度和时间。最后，我们应用了草叶抖动动画，将其添加到我们的样式中，让草叶可以进行抖动。

这样，当我们将其应用到一个图片上，就可以让草叶动起来了！