css 左右摆动动画

CSS 左右摆动动画是一种流行的特效，它使网页元素在左右来回移动，增加页面的动态感。这种动画效果通常用于产品展示、广告宣传以及页面特效装饰等场合。

/* CSS 代码 */.item {
    position: relative;
    animation: wiggle 2s ease-in-out infinite;
}
/* 关键帧动画 */@keyframes wiggle {
0% {
    left: 0;
}
50% {
    left: 50px;
}
100% {
    left: 0;
}
}
    

在上面的代码中，我们对“ .item ”类选择器应用了一个位置为相对的定位，然后使用了“ animation ”属性来应用“ wiggle ”关键帧动画。这个动画有一个 2 秒的时长，使用“ ease-in-out ”动画函数，无限循环。

在关键帧动画中，我们定义了三个关键帧，分别是 0%、50%、100%。在每一个关键帧中，我们给“ left ”属性设置了不同的值，这样就可以让元素在左右移动了。

总结起来，CSS 左右摆动动画是一种简单易用的特效，使用 CSS3 关键帧动画实现。它不仅可以丰富页面特效，还可以增强用户体验。

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