css 左右晃动动画

CSS 左右晃动动画是一种常用的效果，它可以让网页看起来更加生动有趣。实现这种效果主要是利用 CSS3 中的 transform 属性和 animation 属性的组合。

首先，我们需要定义一个 div 元素，然后为它添加需要的 CSS 样式：

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: shake 0.9s ease-in-out infinite;
}
@keyframes shake {
0%, 100% {
    transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
    transform: translateX(10px);
}
}
    

在上述代码中，我们定义了一个红色的 div 元素，并设置了它的宽度和高度都为 100px。然后，我们使用了 position 属性让它的位置定位在屏幕的中央。

接着，我们使用了 transform 属性来设置它的位置，这里我们使用了 translate(-50%, -50%) 的值来让它居中。animation 属性则定义了它的动画效果，这里我们使用了 shake 这个名称来表示晃动动画，并设置了它的执行时间（0.9s）、动画曲线（ease-in-out）和循环次数（infinite）。

最后，我们定义了 shake 这个动画的具体效果。在 keyframes 规则中，我们先定义了 0% 和 100% 时它的位置不变，然后在 10%、30%、50%、70% 和 90% 时往左边偏移 10px，而在 20%、40%、60% 和 80% 时则往右边偏移 10px。

总之，CSS 左右晃动动画是一种简单而实用的效果，可以让网页看起来更加生动有趣。我们只需要熟练掌握相关的 CSS 属性和技巧，就可以轻松实现这种效果。

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