html好看的文字特效

xcLeigh

已于 2022-10-17 10:10:48 修改

阅读量1.3w

点赞数 28

CC 4.0 BY-SA版权

分类专栏：资源源码 HTML5实战案例文章标签： html css 前端

于 2022-08-16 11:52:36 首次发布

本文链接：https://blog.csdn.net/weixin_43151418/article/details/126362293

HTML5实战案例同时被 2 个专栏收录

170 篇文章

订阅专栏

资源源码

154 篇文章

订阅专栏

文章目录

1.3D文字
- 1.1 3D文字源码
- 1.2 3D文字效果
2.会跳动得文字
- 2.1 会跳动得文字源码
- 2.2 会跳动得文字效果
3.文字倒影
- 3.1 文字倒影源码
- 3.2 文字倒影效果
4.文字强调效果
- 4.1 文字强调效果源码
- 4.2 文字强调效果效果
5.更多超级酷炫效果
6.文字属性讲解
7.文字特效下载

html文字特效，3D文字、会跳动得文字、文字倒影、文字强调动画等超多炫酷特效，及详细讲解文本属性，希望能给你作为参考，给你带来好的灵感。

1.3D文字

1.1 3D文字源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xcLeigh</title>
    <style>
        body {
            background: orange;
        }
        h1 {
            margin: 100px;
            text-align: center;
            color: white;
            font-size: 5em;
            transition: 0.5s;
            font-family: Arial, Helvetica, sans-serif;
			cursor:pointer;
        }
        h1:hover {
            text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,
                0 3px 0 #ccc, 0 4px 0 #ccc,
                0 5px 0 #ccc, 0 6px 0 #ccc,
                0 7px 0 #ccc, 0 8px 0 #ccc,
                0 9px 0 #ccc, 0 10px 0 #ccc,
                0 11px 0 #ccc, 0 12px 0 #ccc,
                0 20px 30px rgba(0, 0, 0, 0.5);
        }
		a{
			text-decoration:none;
			color:white;
		}
    </style>
</head>
 
<body>
	<div style="text-align:right;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/126306661">程序员优质资源汇总【附好的源码】</a>
	</div>
    <h1>xcLeigh(鼠标悬浮特效)</h1>
</body>
 
</html>

1.2 3D文字效果

在这里插入图片描述

2.会跳动得文字

2.1 会跳动得文字源码

引用CSS文件见，文字特效下载附件（文章结尾）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xcLeigh</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<div style="text-align:right;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/126306661">程序员优质资源汇总【附好的源码】</a>
	</div>
    <div id="box">
		<span>
		x
		</span>
		<span>
		c
		</span>
		<span>
		L
		</span>
		<span>
		e
		</span>
		<span>
		i
		</span>
		<span>
		g
		</span>
		<span>
		h
		</span>
	</div>
</body>
</html>

2.2 会跳动得文字效果

在这里插入图片描述

3.文字倒影

3.1 文字倒影源码

相关属性说明

1、direction 定义方向，取值包括 above 、 below 、 left 、 right。
above：指定倒影在对象的上边
below：指定倒影在对象的下边
left：指定倒影在对象的左边
right：指定倒影在对象的右边
2、offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
3、mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。
取值：
none：无遮罩图像：
使用绝对或相对地址指定遮罩图像。
使用线性渐变创建遮罩图像。
使用径向(放射性)渐变创建遮罩图像。
使用重复的线性渐变创建背遮罩像。
使用重复的径向(放射性)渐变创建遮罩图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xcLeigh</title>
    <style>
        body {
            background: orange;
        }
 
        h1 {
            margin: 100px;
            text-align: center;
            color: white;
            font-family: Arial, Helvetica, sans-serif;
			cursor:pointer;
            -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
			font:bold 50px/1.231 georgia,sans-serif;
			text-transform:uppercase;
        }
 
        h1:hover {
        }
		a{
			text-decoration:none;
			color:white;
		}
    </style>
</head>
 
<body>
	<div style="text-align:right;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/126306661">程序员优质资源汇总【附好的源码】</a>
	</div>
    <h1>xcLeigh(鼠标悬浮特效)</h1>
</body>
 
</html>

3.2 文字倒影效果

在这里插入图片描述

4.文字强调效果

4.1 文字强调效果源码

引用CSS文件见，文字特效下载附件（文章结尾）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xcLeigh</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<div style="text-align:right;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/126306661">程序员优质资源汇总【附好的源码】</a>
	</div>
    <h1>xcLeigh(鼠标悬浮特效)</h1>
</body>
</html>

4.2 文字强调效果效果

在这里插入图片描述

5.更多超级酷炫效果

文字渐出,波浪渐出
请添加图片描述

文字渐出,窗帘式打开
请添加图片描述

文字渐出,一个一个出
请添加图片描述

文字渐出,渐显
请添加图片描述

文字渐出,打印机
请添加图片描述

文字渐出,圆形特效
请添加图片描述

文字渐出,文字斜出
请添加图片描述

更多效果见文章末尾得附件下载

6.文字属性讲解

属性	名称	说明
font-size	字体大小	单位是px，浏览器默认是16px,设计图常用字号是12px
font-family	字体	当字体是中文字体、英文字体中有空格时，需加双引号;多个字体中间用逗号链接先解析第1个字体如果没有解析第2个字体,以此类推
color	颜色	color.red; color:f#f0; color:rgb(255,0,0); 0-255
font-weight	加粗	font-weight:bolder(更粗的)/bold (加粗) rmal (常规) font-weight: 100-900; 100- 500不加粗600- 900加粗
font-style	倾斜	font-style: italic(斜体字)/oblique(倾斜的文字)normal (常规显示) ;text-align:left;水平靠左
text-align	文本水平对齐	text-align: right; 水平靠右 text-align: center; 水平居中 text- algn;justify;水平2端对齐,但是只对多行起作用。
line-height	行高	line-height的数据=height的数据，可以实现单行文本垂直居中
text-indent	首行缩进	text-indent可以取负值; text-indent属性只对第一行起作用 text-indent可以设置为2em自动缩进2个文字
letter-spacing	字间距	控制文字和文字之间的间距
text-decoration	文本修饰	text-decoration:none没有/underline下划线/overline,上划线ne - through删除线 font是font-style font-weight font- size / line-height font- family的简写。
font	文字简写	fontitalic 800 30px/80px““宋体”;顺序不能改变，必须同时指定font-size和font- family 属性时才起作用