Css左右摇摆那个动作怎么做（css左右摇摆那个动作怎么做的）

Css左右摇摆动作是网页设计中十分实用的效果，可以让页面看起来更加动感，实现这个效果的方法简单易学，下面我们就来了解一下。

Step 1：首先，我们需要在 CSS 中定义一个动画的名称及其对应的动画效果。

/* 定义动画名称及其效果 */@keyframes rocking {
0% {
    transform: rotateZ(0);
}
50% {
    transform: rotateZ(10deg);
}
100% {
    transform: rotateZ(-10deg);
}
}

Step 2：接着，我们需要设置一个 class 名称并将其应用到需要添加动画效果的元素上。

/* 设置 class 名称并将其应用到元素上 */.rock {
    animation-name: rocking;
     /* 指定动画名称为 rocking */animation-duration: 1s;
     /* 动画持续时间为 1 秒 */animation-iteration-count: infinite;
     /* 当前动画重复次数为无限 */animation-timing-function: ease-in-out;
     /* 动画的缓动方式为先慢后快再慢 */transform-origin: center;
 /* 旋转中心为元素中心点 */}
    

Step 3：最后，我们只需要在 HTML 中添加相应的元素并设置其 class 名称为刚刚定义的类名即可。

这里是需要应用动画的元素

以上就是实现 Css 左右摇摆动作的全部内容，通过 CSS 的 animation 功能实现，十分简单易学。当然，如果想要实现其它样式的摇摆动画，也可以通过调整 CSS 中的 transform 属性值来实现。希望对大家有所帮助！

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