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

ztext 能做什么

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

ztext.js 库的特点

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

开发上手体验

在开发 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 上开源,任何人都可免费下载用在自己的项目,包括商业用途。

原文链接:https://www.thosefree.com/ztext

ztext - 简单几行代码创建酷炫 3D 特效文字的开源 JS 库相关推荐

  1. 自定义动画属性java_创建酷炫动画效果的10个JavaScript库

    原标题:创建酷炫动画效果的10个JavaScript库 1) Dynamics.jsDynamics.js是设计基于物理规律的动画的重要Java库.它可以赋予生命给所有包含CSS 和SVG属性的DOM ...

  2. canvas实现2019最酷炫3D特效

    效果展示: 你可以玩一天 源码展示: <!DOCTYPE > <html> <head><title> canvas 实现3d特效 </title ...

  3. 给Python代码加上酷炫进度条的几种姿势

    作者 | 刘早起 来源 | 早起Python(ID: zaoqi-python) 大家好,在下载某些文件的时候你一定会不时盯着进度条,在写代码的时候使用进度条可以便捷的观察任务处理情况,除了使用pri ...

  4. Python简单几行代码实现黑客电影镜头屏幕画面

    Python简单几行代码实现黑客电影镜头屏幕画面 通过几行简单的Python代码实现炫酷的数据流动效果 一.Python版本:Python3 二.操作示范 为了显得更加牛逼 逼真,通常不会直接运行源代 ...

  5. 国外stripe支付,超简单几行代码搞定

    国外stripe支付,超简单几行代码搞定 海外的项目 需要stripe支付 很简单 几行代码 先加入依赖: compile 'com.stripe:stripe-android:6.1.2' 总共两种 ...

  6. 简单20行代码爬取王者荣耀官网1080p壁纸

    简单20行代码爬取王者荣耀官网1080p壁纸 # -*- coding: utf-8 -*- # @Time : 2020/12/13 18:08 # @Author : ningfangcong i ...

  7. 三百行python代码的项目_使用300行代码创建一个分布式系统

    使用 300 行代码创建一个分布式系统 构建一个分布式系统是很困难的. 它需要可扩展性. 容错性. 高可用性. 一致性. 可伸缩以及高效.为了达到这些目的,分布式系统需要很多复杂的组件以一 种 复杂的 ...

  8. python热搜排行功能_简单几行代码用Python爬取微博的热搜榜

    简单几行代码用Python爬取微博的热搜榜 想要实时的看微博热搜 但是又不想去微博网站看!怎么办呢?其实很简单! 我们学了这个requests_html 这个库之后 就更加的简单了! 小编只用了短短的 ...

  9. unity 彩带粒子_Unity粒子系统插件,打造酷炫魔幻特效

    原标题:Unity粒子系统插件,打造酷炫魔幻特效 儿时的你是否也会幻想自己拥有超能力,能召唤各种水光火电或是操纵世间万物?现在的我们已经不需要幻想了,因为游戏就能满足所有的这些或天真或童趣的想法.而作 ...

最新文章

  1. pytorch加载预训练模型_Pytorch-Transformers 1.0发布,支持六个预训练框架,含27个预训练模型...
  2. LeetCode 27移除元素28实现strStr()29两数相除
  3. html dvi如何设置置顶不能空白位置,[html]关于html标签的一些总结
  4. php iis redis,iis windows phpstudy安装redis扩展
  5. Hadoop HIVE 创建表
  6. on() 和 click() 的区别:二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。以下实例中原先的 HTML 元素点击其身后的 Dele
  7. Qt程序移植到其他电脑上无法运行的解决方法
  8. 昨天发生的四件大事!
  9. c语言如何实现单进程,如何用C语言实现多线程
  10. 基于asp.net338医院体检信息管理系统
  11. 服务器部署nginx配置域名反向代理
  12. 基于Dense-U-net的3D粒子场全息重建
  13. Android开发固定app图标大小,Android和IOS开发图标、启动页尺寸
  14. Js--根据身份证号计算年龄、性别、出生年月日
  15. Glut 下载及配置
  16. C# 导入(读取) WPS ET文件
  17. android 毫秒 计时器,Android时分秒计时器的两种实现方法
  18. 阿里云HPC助力新制造 | 上汽仿真计算云SSCC 1
  19. Unity之谷歌应用内评价(google play in-app review)
  20. 连续特征如何离散化,为什么要离散化,常用于逻辑回归模型

热门文章

  1. 2022年中国中式快餐行业发展现状、市场竞争格局及未来发展趋势分析[图]
  2. 大数据相关技术入门(基于CentOS7)
  3. markdown 文本内跳转,生成目录
  4. 游戏设计文档的功能及类型
  5. 《D o C P》学习笔记(6 - 1)Word Games
  6. Dremel学习总结2
  7. 腾讯云配置jupyter notebook远程登录
  8. 浏览器中访问本地文件for mac
  9. 如何快速无损地把flv格式文件转换为mp4格式(可在iPhone上播放)
  10. Activity毛玻璃背景效果