本篇分享的字符雨特效主要通过JS实现。

实现步骤：

1、页面分为50列（可根据样式中设置的字体大小调整列数，确保铺满整个页面），每列随机选取50个字符。

2、字符置于 <span> 标签中展示，设置span样式 display:block 确保字符竖向按列排布。

3、初始随机指定每一列中设置下雨效果的字符列表长度和起始位子，即雨点起始位置和雨线长度。

4、在requestAnimationFrame中设置雨线字符颜色，改变雨线位置，实现下雨效果。

实际效果：

关键代码：

在requestAnimationFrame中设置循环：

function loop(fn, delay) {let stamp = Date.now();function _loop() {if (Date.now() - stamp >= delay) {fn(); stamp = Date.now();}requestAnimationFrame(_loop);}requestAnimationFrame(_loop);}

改变雨线位置：

//通过移动下标指定改变雨线位置move() {this.body = [];let { offset, size } = this.options;for (let i = 0; i < size; ++i) {let item = this.list[offset + i - size + 1];this.body.push(item);}// 每次移动后雨线起始位置向后移，超过竖列长度后自动回到顶部this.options.offset = (offset + 1) % (this.list.length + size - 1);}

设置雨线颜色：

//设置雨线部分各字符的颜色样式setColor() {this.body.forEach((c, i) => {if (c) {c.element.style = `color: hsl(136, 100%, ${85 / this.body.length * (i + 1)}%)`;if (i == this.body.length - 1) {// 雨线最底部点高亮显示c.refreshText();c.element.style = `color: hsl(136, 100%, 85%);text-shadow:0 0 .5em #fff,0 0 .5em currentColor;`;}}})}

代码下载：很哇塞的网页特效之字符雨特效-网页制作文档类资源-CSDN下载

很哇塞的网页特效之字符雨特效相关推荐

很哇塞的网页特效之摩天轮相册
情人节到了,给大家分享一个仿摩天轮效果的相册页面,效果如下图: 页面主要部分是图片列表,使用div包裹: <div class="carousel-item">< ...
python做花瓣飘落的背景_jquery+css3实现网页背景花瓣随机飘落特效
飘花效果的实现--效果图: 需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jquery对一些效果的扩展飘花的效果稍微复杂一点,有一定量的JavaScr ...
python做花瓣飘落的背景_JavaScript_jquery+css3实现网页背景花瓣随机飘落特效，飘花效果的实现——效果图： - phpStudy...
jquery+css3实现网页背景花瓣随机飘落特效飘花效果的实现--效果图: 查看演示源码下载需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jq ...
php 飘花特效,jquery+css3实现网页背景花瓣随机飘落特效_javascript技巧
飘花效果的实现--效果图: 需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jquery对一些效果的扩展飘花的效果稍微复杂一点,有一定量的JavaScr ...
android朋友圈图片背景图片,做个很哇塞的女孩背景图朋友圈
做个很哇塞的女孩背景图朋友圈是全新的一系列的图片,也是抖音最近非常火的一组图片,可以用于发朋友圈,手机壁纸等,因为这一组图片受到了很多女孩子的喜爱,也充分展现了女孩子自立自强的决心,所以很多小姐姐都用 ...
5个很常用的CSS3网页小实例
5个很常用的CSS3网页小实例第一种效果: 由于录制gif图片会掉帧,所以看起来不流畅,很卡,但其实实际效果还是不错的,有弹性一些. HTML <span class="shake& ...
Java坦克大战，基于Swing编写很哇塞的小游戏，可以做课程设计毕业设计
Java坦克大战,基于Swing编写很哇塞的小游戏,可以做课程设计毕业设计有图有真相操作方法:ASDW控制移动,鼠标控制炮筒旋转,鼠标左键开枪,空格发射炮弹, 开发思路是标准的游戏开发思路,单线程 ...
Urp下自定义特效管线和后处理特效实现
一.如何获得颜色缓冲网上搜索Unity的后处理或者获得屏幕缓冲,大部分会提到用grabpass到一张指定纹理上或者写一个后处理脚本挂在摄像机上.但是这种方式在Urp管线下已经不生效了.urp取消了默 ...
游戏特效详解！如何理解特效和判定一个特效的品质标准？
导读:游戏特效看起来是一个很虚幻的东西,只能去发挥你无限的想象来表现它,然而它的形成也是如同大自然的规律一样,不是毫无关联,胡编瞎扯的. 特效从产生到消失每个环节都是息息相关.衔接紧密的.特效也有一个 ...

很哇塞的网页特效之字符雨特效

实现步骤：

实际效果：

关键代码：

很哇塞的网页特效之字符雨特效相关推荐

最新文章

热门文章