马上又是新的一年，简单许个愿

前言

最近在手机上看见一个许愿的页面，用户留言的许愿信息一个个从页面底部向上移出页面顶部，底部有个输入框可以输入愿望，点击发送就显示到页面中。感觉挺好玩的，因此来实现一个类似的效果。

页面布局

手机上的许愿页面和每条许愿信息都有背景，搭配的很好看。没有设计才华的人只能从网上找一些比较顺眼的搭配一下了。因此从一个设计网站（Canva）找了一张过年氛围的红色背景图，4个书签当做许愿信息的背景。

页面主要包含两个部分，一个是用来显示许愿信息，另一个是输入愿望。

页面设置最大宽度为750px, 高度为100vh，并设置背景图。
许愿信息使用js动态创建li元素，添加到页面
输入愿望模块使用固定定位展示在页面底部

html 复制代码

<div class="container">
    <ul class="wish-container"></ul>

    <div class="send-box">
      <input id="send-input" type="text" placeholder="请输入许愿内容（15字以内）">
      <button id="send-btn">发送</button>
    </div>
  </div>

具体实现

在css中定义从下到上移动的动画效果

这里定义了两种动画效果，都是从页面底部移动到顶部，其中一种加上了逐渐变小的效果，同时改变translateZ()属性的值（translateZ用于 3D 空间的 z 轴方向移动元素，实现元素在自己的眼前或近或远）。

ps: 手机上的许愿动画效果3d的感觉更明显,许愿信息在最上面看起来比较大，下面的小一些，不知道是怎么实现的

css 复制代码

 @keyframes up {
      0% {
        top: 100vh;
        transform: translateY(0);
      }

      100% {
        top: 0;
        transform: translateY(-100vh);
      }
    }

    @keyframes bottomup {
      0% {
        top: 100vh;
        transform: translateY(0) translateZ(400);
      }
      50% {
        top: 50vh;
        transform: translateY(-50vh) translateZ(200)  scale(.7);
      }
      100% {
        top: 0;
        transform: translateY(-100vh) translateZ(0)  scale(.5);
      }
    }

定义数组data和wishBg，data用于模拟数据，存储用户的许愿信息；wishBg用来存储许愿信息的背景。
创建愿望元素的方法createElement（）

a. 在其中创建li愿望元素，给其添加wishBg数组中随机一个背景图，并在其中创建span标签，加上许愿文字。

b. li元素一开始不显示，当动画开始才让其显示；根据屏幕宽度设置left的值

c. 定义一个变量count，来决定使用哪种动画效果。当count为偶数时就给元素加上bottomup动画，为奇数就加上另一种动画

d.给动画设置随机持续时间和延迟时间

js 复制代码

function createElement(value) {
      let wish = document.createElement('li')
      let randomNum = Math.floor(randomFloat(0, 4))
      wish.style.backgroundImage = `url(${wishBg[randomNum]})`
      wish.innerHTML = `<span>${value}</span>`
      
      wish.style.opacity = 0
      wish.addEventListener('animationstart', function () {
        wish.style.opacity = 1
      })
      // 获取屏幕当前的宽度
      const screenWidth = window.innerWidth
      //元素距页面左侧的距离
      wish.style.left = Math.floor(randomFloat(10, screenWidth - 60)) + 'px'
      // 给生成元素添加动画
      if(count % 2 === 0){
        wish.style.animationName = 'bottomup'
      }else{
        wish.style.animationName = 'up'
      }
      // 随机设置动画时间
      const fadeAndDropDuration = randomFloat(10, 15) + 's' 
      const leafDelay = randomFloat(0, 4) + 's'
      wish.style.animationDelay = leafDelay
      wish.style.animationDuration = fadeAndDropDuration
      count++
      return wish
    }

创建初始化数据的方法initWish()

页面初始化的时候，将data数据展示到页面中

发送按钮添加点击事件

当输入的值不为空并且长度小于15，就执行创建元素的方法，并将元素添加到页面中

马上又是新的一年，简单许个愿

前言

页面布局

具体实现

效果展示