Vue<文字光影效果>
2020-03-11 本文已影响0人
誰在花里胡哨
效果图:
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项目的可以直接复制,其他的需要加以改造)