文章目录
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
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
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 属性时才起作用 |
7.文字特效下载
💞 带你实现畅游前后端
🏰 带你体验马航不孤单
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌