css动画让小草抖动
导读:最近,我学习了CSS动画,尝试用它让一片小草抖动起来。下面,我将分享一下我的经验。.grass {width: 200px;height: 100px;background-color: #5cb85c;position: relative...
最近,我学习了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核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css动画让小草抖动
本文地址: https://pptw.com/jishu/432615.html