前端3D文字效果
时间:2022-07-27
本文章向大家介绍前端3D文字效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天来讨论一下前端的3D文字效果,如图:
字体阴影
看到这样的效果,首先想到的当然是CSS中的文字阴影来实现,首先给出HTNL代码:
<div class="font-3d">CSS 3D效果</div>
接下来就是添加样式了,大笔一挥如下:
body{
background: #c7f6f6;
}
.font-3d{
font-size: 50px;
font-weight: bold;
color: #ffebcd;
text-shadow: 4px 4px 0 #158af7;
}
最关键的一个样式是text-shadow
,他的签名是这样的:text-shadow: h-shadow v-shadow blur color;
,其中第一个参数h-shadow
是水平方向的偏移量,正数是向右偏移,负数是向左偏移;第二个参数v-shadow
是垂直方向偏移量,正数是向下偏移,负数是向上偏移;第三个参数blur
是模糊大小,值越大越模糊,该值可以不写,默认是0,表示不模糊;第四个参数color
是颜色,同样可以不写,默认是当前字体的颜色。
此时我们发现,单纯的阴影边界地方有菱角,缺乏立体感,具体效果如下:
多重阴影模拟
为了让效果更好,我们可以写多重阴影来模拟,阴影每次增加1点(这里是1px),这样看着就像阴影连着似得,如下:
body{
background: #c7f6f6;
}
.font-3d{
font-size: 50px;
font-weight: bold;
color: #ffebcd;
text-shadow:
1px 1px 0 #158af7,
2px 2px 0 #158af7,
3px 3px 0 #158af7,
4px 4px 0 #158af7;
}
此时的效果,就跟刚开始看到的是一样的了。你可以点击这里自己修改一下样式试试。
three.js中的3D字体
three.js是非常著名的3D库,写个3D字当然是不在话下(单纯的用这做3D字绝对是大材小用)。three.js
使用3D字体大概需要2步骤,第1步引入typeface
类型的字体,第2步把TextGeometry
文字结构对象加入到场景中。具体的可以看一下官方给出的这篇文章,这里就不再重复叙述了。
- 零基础学编程035:群发邮件并不难
- 零基础学编程024:如何快速学会SQL?
- 机器学习的基础讲解:神经网络
- 零基础学编程023:用with实现优雅地释放资源
- Start transaction not working with Revit 2014
- 零基础学编程034:解决一个pandas问题
- ShellExecute 启动外部程序 参数详细介绍
- 零基础学编程033:字符串的split拆分与join连接
- 零基础学编程032:生成二维码
- C#,一些非常简单但应该知道的知识点
- C#神奇的扩展方法
- 使用Python制作一个简单的刷博器
- 零基础学编程031:Python与其它语言最不同的一条语法规则
- dedecms批量导出新增文章url和标题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信小程序锚点选择导航栏
- vue-ripple-directive点击水波纹
- dubbo学习之源码创建属于自己的dubbo-demo
- Vue4.x配置env开发环境、测试环境、生产环境
- SpringBoot总结之CommandLineRunner
- 详细整理Spring事务失效的具体场景及解决方案
- Vue监听文本框实时输入限制输入长度
- 30 分钟轻松搞定正则表达式基础
- Vant引入CDN实现图片懒加载
- Js时间戳倒计时天时分秒
- 微信小程序引用we-cropper裁切图片
- NodeJs获取get/post传值
- Mybatis源码本地化构建Demo
- NodeJs封装静态web服务器、路由、读取文件获取响应类型
- NodeJs使用ejs模板引擎实现后端渲染