js特效模板—js特效插件 收藏 0

ztext – 简单几行代码创建酷炫3D特效文字的开源JS库

把网页上的文字变成酷炫的 3D 风格，还能制作旋转动效，有了 ztext.js，只需要几行代码。

ztext 能做什么

ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库，让开发者能通过非常简单的 api 创造出酷炫的 3D 文字效果。配合 CSS 动画，可以实现惊艳酷炫的交互效果。

ztext 官网文档截图

ztext.js 库的特点

• 轻量无依赖，支持原生 javascript 和在 Vue / React 中安装使用
• 性能强劲，兼容性强。基于 CSS 的 transform-style 属性实现，超过98%用户的浏览器都支持，而且用于 CSS transform 的动画性能很高
• 功能强大，适用范围广。不仅适用于任何中西文字体，还支持图片/ svg / Emoji 表情符号

支持图片/svg/表情符号

开发上手体验

在开发 PC 端展示型的页面或应用时，运用合适的特效，能让呈现效果印象深刻。把 banner 上的标题变成 3D，搭配设计精美的元素，是一个很见的需求。而常规的方法是使用 canvas，前端需要加载几M大小的 WebGL 库，折腾数小时才能实现。

ztext.js 就是一个适用于这样场景的 js 库，压缩版本大小仅3.8kb，api 也非常简单，而且官网有详细的代码例子，甚至不需要有太扎实的代码基础，copy 改改就能用，快速创建酷炫的 3D 文字特效。配合鼠标悬停的交互，着实能为产品增色不少。

ztext.js 实现 3D 文字的原理

ztext.js 并没有引入真正的第三方 3D 库来实现三维视图，而是通过从 HTML 元素创建图层，来给人一种立体的错觉，基于 CSS 的 transform-style 属性来还原 3D ，视觉效果非常好，作为用户没有发现任何区别，而且很容易结合 CSS3 动画来使用，能够随时调整角度，非常喜欢这种简单酷炫的方式。

免费开源说明

ztext.js 基于 MIT 开源协议在 Github 上开源，任何人都可免费下载用在自己的项目，包括商业用途。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

Axure教程：通过引用前端JS代码实现浏览器全屏效果

在我们设计使用大屏模板或大屏报表时，都会需要浏览器全屏展示预览的需求，通常我们都需要通过键盘F11来切换浏览器全屏效果。但是，也发现了一个问题就是我们面对的很多客户，他们并不懂F11可以全屏，给产品设计沟通带来了不便。那有没有什么方式可以直接通过鼠标点击按钮来切换全屏。答案是肯定有的，今天符号作者教大家如何利用前端的JS代码来实现浏览器全屏效果。

注意：

在看教程之前，请行了解一下，什么时javascirpt，JavaScript入门教程自行百度。当然，今天的案例RP也会免费提供给大家下载学习，也欢迎应用到更多的产品实践中去

JavaScript介绍：

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

先预览一下效果：

在线演示地址：

JS代码准备：

1、全屏代码：

2、退出全屏代码：

Axure添加JS代码：

最早有发过一篇《》，有教过大家，Axure怎么添加JS外部代码，不懂的可以在回去看看。

步骤一：

打开Axure，拉取一个动态面板，创建2个State面板。一个面板里放一个矩形，命名为：全屏。另一个命名为：退出。如图：

步骤二：全屏交互制作

打开Axure，进入-全屏面板，点击添加鼠标点击事件，打开-当前链接-fx。

将前面准备好的全屏JS代码复制到FX里保存即可。要注意的是开头必须要加。javascript:

设置面板切换效果，如图，当点击时面板切换为退出面板。

步骤三：退出交互制作

打开Axure，进入-退出面板，点击添加鼠标点击事件，打开-当前链接-fx。

同样的将前面准备好的退出全屏JS代码复制到FX里保存即可。通样要注意的是开头必须要加。javascript:

至此，保存文件F5预览试试吧。教程相关文件下载：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com