PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

春节祝福语

介绍

这个项目是关于 春节祝福语 的随机产生。通过这个衍生，之后不仅祝福语，还可以弄诗词，还可以弄歌曲等等。

技术：通过 Vite2，Vue3 快速搭建一个项目。里面用到鼠标点击事件产生烟花爆炸效果，css 动画效果，按钮防抖等。

项目演示：

Jan-26-2022 17-32-47.gif

实现效果

这里要实现的效果需求点：

页面布局展示
图片不可选择
鼠标点击页面产生烟花爆炸效果
鼠标点击小老🐯 爪爪上的福字
随机产生新年祝福语
新年祝福语字体选择
点击外层恢复如初

技术

创建项目，输入命令后，选择vue，清空页面里的无关东西
```
    npm init @vitejs/app
```
页面布局

这里就不多啰嗦了。
css 样式

这里有几个注意点,字体选择，css animation 动画，图片不可选择
- 如何引入并使用自定义字体
```
  @font-face {
    font-family: myFont;
    src: url('./assets/ttf/a.ttf');
  }

  .button-text{
    font-family: myFont;
    font-size: 50px;
  }
```
- css animation 动画的使用
  
  这个技术点，因为场景不同，变化也不同，不过可以通过多看一些现成的动画效果，来进行学习，加深记忆和熟练度。
- 文字间隔
  
  letter-spacing 属性增加或减少字符间的空白（字符间距），可以为负数，会让字母之间更紧
- 图片不可选择
  
  user-select: none; 这个属性，用于文字和图片的禁止选中，也就是不让用户复制，正好也解决了我们图片不让选中，不然图片能选中就很丑。

爆炸效果

首先是监听全局的一个鼠标点击事件，获取当前鼠标所在位置

    document.onclick = (e) => {
      const x = e.clientX
      const y = e.clientY
    }

鼠标点击

这里有两种方式可以进行，第一种 onClick，第二种 addEventListener('click',myFunction)

这里我选择的事 onClick ，毕竟它是先于 addEventListener 触发.

而且销毁时 onClick 直接指向 null 即可，addEventListener 还需要配合 removeEventListener

当然这个选择看个人，毕竟这里提供思路，小项目里可以不纠结这么多，若大项目还是建议 addEventListener 具体监听，具体销毁

创建 80 个烟花碎片

  const yanHua = (x, y) => {
    const yanhua = []
    const yanhuaLength = 80
    for (let i = 0; i < yanhuaLength; i++) {
        const yhx = Math.round(Math.random() * 40) - 20
        const yhy = Math.round(Math.random() * 40) - 20

        yanhua[i] = document.createElement('div')
        yanhua[i].style.position = 'absolute'
        yanhua[i].style.left = x + yhx + 'px'
        yanhua[i].style.top = y + yhy + 'px'
        yanhua[i].style.width = '2px'
        yanhua[i].style.height = '2px'
        if (i % 3 === 0) {
            yanhua[i].style.background = '#ffff00'
        }else{
            yanhua[i].style.background = '#ff3300'
        }
        document.body.appendChild(yanhua[i])
        yanhua[i].yhxx = Math.round(Math.random() * 20) - 10
        yanhua[i].yhyy = Math.round(Math.random() * 20) - 10
    }
  }

烟花散落效果

  let useNumbers = 0
  setInterval(() => {
      for (let i = 0; i < yanhuaLength; i++) {
          useNumbers++
          if (useNumbers < 1500) {
              yanhua[i].style.left = yanhua[i].offsetLeft + yanhua[i].yhxx + 'px'
              yanhua[i].style.top = yanhua[i].offsetTop + yanhua[i].yhyy + 'px'
              yanhua[i].yhyy++
          } else {
              if (document.body.contains(yanhua[i])) {
                  document.body.removeChild(yanhua[i])
              }
          }
      }
  }, 1000 / 200)

随机祝福语

  state.name = state.nameList[Math.floor(Math.random() * nameListLength)]
  
  const nameList: [
    '虎虎生威',
    '心想事成',
    '六六大顺',
    '金玉满堂',
    '大吉大利',
    '年年有余',
    '五福临门',
    '马到功成',
    '生意兴隆',
    '恭喜发财',
    '锦绣前程',
    '一帆风顺',
    '万事如意',
    '吉星高照',
    '招财进宝',
    '财源广进'
    '...'
    ],

按钮防抖

  const timer = null
  const buttonClickFunc = () => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      console.log('执行！')
      changeValue()
    }, 300)
  }

其他页面效果通过 Vue 的语法和逻辑编写相关代码就可以实现。

工具

GIF 录制工具

GIPHY CAPTURE

我这里是使用 MAC 电脑上的 GIPHY CAPTURE 录制工具，可在 App Store 上免费进行下载，这里放上软件 LOGO

总结

用到很多知识点，而且都是零碎的知识，也很容易忘记，正好这个项目，又重新回顾一遍。

最后 2022 祝大家虎年快乐

🔥春节祝福语，不来瞧瞧？

春节祝福语

介绍

实现效果

技术

工具

GIF 录制工具

总结