前端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
文字结构对象加入到场景中。具体的可以看一下官方给出的这篇文章,这里就不再重复叙述了。
- 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 数组属性和方法