Vue<文字光影效果>

效果图：

light20200311.gif

🎈首先说明，以下参考地址和我的代码没有任何关系，不要问我为什么，因为大牛写的代码我看不懂，涉及到了3D效果，所以很难搞😂！！但是自己又非常喜欢这种效果，于是就绞尽脑汁，想到了别的方法来实现~~~~~~ 😁😁(感觉效果很好)

参考效果地址：https://www.jq22.com/code1811

其实实现起来不算困难，说实话只要你css功底够好，很快就能写出来的 👌

🎈知识点：

1. css的 perspective 景深，不太了解的可以先参考 这篇文章
2. css的 radial-gradient() 径向渐变
3. css的 transform
省略了小的知识点 ~~~~~~ 🐷

此处有用到 TweenLite，有看过我之前文章的小伙伴应该知道是什么，只是一个简单的引用库，用来处理位置偏移等动画效果的

🎈可以通过修改 text 变量，实现自己想要的文字

      text: "text"

image.png

汉字也是可以的(但是汉字比较繁琐，所以效果不是很好) ~~

      text: "花里胡哨"

image.png

🎈也可以通过修改 light_bck 变量，实现光影颜色的变化

  let light_bck = `radial-gradient( 500px at ${t_x}px ${t_y}px, rgb(231, 247, 93),rgba(18, 194, 156, 0.938),rgba(25, 91, 212, 0.938),rgba(26, 46, 231, 0.836),transparent)`;

image.png

🎈为了方便大家理解，可以看下面一张图，估计就能知道个所以然了

image.png

🚩🚩感兴趣的可以自己研究研究，想要偷懒的小伙伴，可以直接捡现成的~~~~😘(基于vue项目的可以直接复制，其他的需要加以改造)

代码如下：