css动画让小草抖动

最近，我学习了CSS动画，尝试用它让一片小草抖动起来。下面，我将分享一下我的经验。

.grass {
    width: 200px;
    height: 100px;
    background-color: #5cb85c;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.grass:before,.grass:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: #5cb85c;
    transform: translate(-50%, 100%) rotate(45deg);
}
.grass:after {
    left: auto;
    right: 0;
    transform: translate(50%, 100%) rotate(-45deg);
}
@keyframes grass-shake {
0% {
    transform: translateX(-5px) rotate(0);
}
50% {
    transform: translateX(5px) rotate(0);
}
100% {
    transform: translateX(-5px) rotate(0);
}
}
.grass {
    animation: grass-shake 2s infinite;
}
    

首先，我创建了一个类名为“grass”的div，这个div就是整篇小草的主体。然后，我给这个div设置了一些基本样式，如宽高、背景颜色和圆角等。

接下来，在这个div里创建了两个伪元素:before和:after，分别设置宽高为0，颜色与小草主体一致，并且通过transform调整它们的位置和角度，模拟出草叶的图案。

然后，我使用CSS3的关键帧动画@keyframes，创建了一个名为“grass-shake”的动画。这个动画会让小草在X轴上左右晃动。动画执行时间为2秒，无限循环播放。

最后，我将这个动画应用到了小草主体上，使用animation属性指定，让它开始抖动起来！

这就是我用CSS动画让小草抖动的经验，希望能给大家一些启示和帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！