js简单实现放花灯的效果

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

元宵节那天，原本打算抓住新年的尾巴，去放花灯许愿的，可是排队放花灯的人太多了，没放成。因此使用js简单实现放花灯的效果，完成这小小的遗憾。

具体实现

1. 先从网上找一张夜晚的河流图片作为页面的背景图，让花灯在图片中的河流大概范围中移动。

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-image: url('https://bing.com/th?id=OHR.NationalDay70_ZH-CN1636316274_UHD.jpg');
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

2. 页面中添加一个元素，大小设置成图片中河流的大概范围，位置使用定位控制在图片中河流的位置上，包含所有的花灯元素，当花灯移动超出该元素，则隐藏

.container {
  width: 100%;
  height: 230px;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 10% 30% 0 0;
}

3. 实现花灯

使用js生成设置的固定数量的花灯，添加到页面中。并设置花灯的初始位置（控制在页面底部的水平方向的随机位置）以及花灯在河流上移动的动画和动画时间（动画由css属性关键帧实现，js控制每个花灯随机动画时间）

花灯的组成元素由js生成，在css中实现花灯的样式。花灯分成四个侧面，一个顶部，一个底部。因为花灯是立体的，使用transform-style: preserve-3d;实现3D视觉效果，每个面元素位于 3D 空间中，transform相关属性值实现旋转、移动。花灯的每个侧面和上下的面都使用绝对定位控制位置，花灯的底部设置一个阴影动画，实现烛光晃动的效果

.latern {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center center;
  transform: rotateX(-15deg) rotateY(-30deg) translateZ(0px);
}

.side {
  position: absolute;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  border: 1px solid #9b4400;
  border-radius: 5px;
}

function createLatern() {
  // 创建元素
  var laternDiv = document.createElement('div');
  laternDiv.className = 'latern-box'
  laternDiv.innerHTML = "<div class='latern'><div class='side'>兔</div>" +
    "<div class='side'>年</div>" +
    "<div class='side top'></div>" +
    "<div class='side'>大</div>" +
    "<div class='side'>吉</div>" +
    "<div class='side bottom'></div></div>";
  // 初始位置
  laternDiv.style.bottom = "0";
  laternDiv.style.left = pixelValue(randomInteger(0, 1500));

  // 给生成的元素添加动画
  laternDiv.style.animationName = 'move';
  // 随机设置动画时间
  var fadeAndDropDuration = durationValue(randomFloat(10, 40));
  var laternDelay = durationValue(randomFloat(5, 20));
  laternDiv.style.animationDelay = laternDelay;
  laternDiv.style.animationDuration = fadeAndDropDuration;

  return laternDiv;
}

注：花灯的外层元素由js设置了动画、动画时间，但是需要在css中设置该元素的动画循环次数（无限循环infinite），不然花灯移动了一次就不会再次移动了，效果不太好看。

实现花灯的css、js代码没有展示完全，具体可查看码上掘金

页面效果展示：code.juejin.cn/pen/7197714…