css3灯笼左右晃动

CSS3灯笼左右晃动是一种比较有趣的效果，适用于节日活动等网站的装饰。下面我们就来看一下如何实现。

/* CSS 代码开始 */.lantern-wrapper {
      position: relative;
}
.lantern {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 80px;
      height: 120px;
      margin-left: -40px;
      animation: swing 2s ease-in-out infinite alternate;
}
@keyframes swing {
  0% {
        transform: rotateZ(5deg);
  }
  100% {
        transform: rotateZ(-5deg);
  }
}
    /* CSS 代码结束 */

首先，在HTML中创建一个灯笼容器，宽度为整个屏幕。然后，创建一个灯笼元素，宽度为80像素，高度为120像素，并让它位于容器的底部中央。需要注意的是，要为容器设置相对定位，为灯笼设置绝对定位。

然后，在CSS中定义灯笼元素的动画效果。动画名称为swing，持续2秒钟，缓动函数为ease-in-out，无限循环，交替反向播放。在关键帧中，让灯笼从5度旋转到-5度，实现左右摇晃的效果。

最后，将灯笼元素插入到灯笼容器中。运行代码，就可以看到灯笼在页面上左右晃动了。

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