肝了⼀宿才收集的48个超炫酷的CSS⽂字特效，绝对值得收藏
⽂章⽬录
⼀、实现线性渐变的⽂字
实例描述：在⽹页制作时，可以通过对⽂字颜⾊的设置来实现⽹页的特殊效果。本实例将使⽤ CSS3 实现⽂字线性渐变的效果。运⾏实例，在页⾯中会输出⼀串线性渐变的⽂字⼈⽣苦短，我⽤Python，结果如下图所⽰：
技术要点：本实例主要使⽤了 CSS3 中的 linear-gradient() 函数，该函数⽤于创建⼀个线性渐变的图像。语法格式如下：
background:linear-gradient(direction, color-stop1, color-stop2, …)
/*参数说明：
1. direction：设置渐变的⽅向，可以使⽤⾓度值。
2. color-stop1, color-stop2, …：指定渐变的起⽌颜⾊。*/
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现线性渐变的⽂字</title>
<style>
.content{
margin-top: 30px;
font-size: 64px;
background:-webkit-linear-gradient(top, #FF0000, #00FF00);/*设置线性渐变*/
/*为了⽀持更多的浏览器*/
-webkit-background-clip: text;/*背景被裁剪到⽂字*/
-webkit-text-fill-color: transparent;/*设置⽂字的填充颜⾊*/
}
</style>
</head>
<body>
<div class="content">
⼈⽣苦短，我⽤Python
</div>
</body>
</html>
⼆、制作⽂字阴影效果
实例描述：结果如下图所⽰：
技术要点：本实例主要使⽤了CSS3中的text-shadow属性，该属性⽤于向⽂本设置阴影。语法格式如下：
text-shadow: h-shadow v-shadow blur color;
/*参数说明：
h-shadow：必选参数，⽤于设置⽔平阴影的位置，可以为负值。
v-shadow：必选参数，⽤于设置垂直阴影的位置，可以为负值。
blur：可选参数，⽤于设置模糊的距离。
css设置文字垂直居中color：可选参数，⽤于设置阴影的颜⾊。*/
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作⽂字阴影效果</title>
<style>
.milky{
font-size: 80px;/*设置⽂字⼤⼩*/
color:#3366FF;/*设置⽂字颜⾊*/
text-shadow: 0 8px 10px #6699FF;/*设置⽂字阴影*/
font-weight: bolder;/*设置⽂字宽度*/
text-align: center;/*设置⽂字居中*/
}
</style>
</head>
<body>
<div class="milky">让优秀成为⼀种习惯</div>
</body>
</html>
三、制作⽂字模糊发散效果
实例描述：结果如下图所⽰：
技术要点：在本实例中，为⽂字设置模糊发散的效果同样需要应⽤CSS3中的text-shadow属性，应⽤该属性为⽂字设置阴影，并且不设置阴影在⽔平⽅向和垂直⽅向的偏移值，同时需要设置⽂本的颜⾊为透明状态。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
font-family:"微软雅⿊";/*设置字体*/
font-size: 50px;/*设置⽂字⼤⼩*/
color:transparent;/*设置⽂字颜⾊透明*/
text-shadow: 0 0px 6px #66FF99;/*设置⽂字阴影*/
/*text-align: center;  /*设置⽂字居中*/*/
}
</style>
</head>
<body>
<p>千⾥之⾏始于⾜下</p>
</body>
</html>
四、制作3D⽴体⽂字
实例描述：在⼀些动画的⽹站中，经常会看到⼀些3D效果的⽂字，这样可以使页⾯更有⽴体感。本实例将在页⾯中制作⼀个3D效果的⽂字，结果如下图所⽰：
技术要点：在本实例中，实现⽂字的3D效果同样使⽤了CSS3中的text-shadow属性，通过该属性向⽂本添加多个阴影，多个阴影之间⽤逗号分隔。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作3D⽴体⽂字</title>
<style>
body{
background:#CCCCCC;/*设置页⾯背景颜⾊*/
color:#FFFFFF;/*设置⽂字颜⾊*/
text-align:center/*设置⽂字居中*/
}
.threeD{
font-size:80px;/*设置字体⼤⼩*/
font-weight:800;/*设置字体粗细*/
text-shadow:1px 0px #009916, 1px 2px #006615, 3px 1px #009916,
2px 3px #006615, 4px 2px #009916, 4px 4px #006615,
5px 3px #009916, 5px 5px #006615, 7px 4px #009916,
6px 6px #006615, 8px 5px #009916, 7px 7px #006615,
9px 6px #009916, 9px 8px #006615, 11px 7px #009916/*设置⽂字阴影*/
}
</style>
</head>
<body>
<div class="threeD">想你的液</div>
</body>
</html>
五、以两种不同颜⾊显⽰⽂字
实例描述：本实例将实现以两种不同的颜⾊显⽰⼀⾏⽂本的上、下两部分。运⾏实例，在页⾯中输出“诗与远⽅”四个⽂字，⽂字的上半部分以橙⾊显⽰，下半部分以绿⾊显⽰，结果如下图所⽰：
技术要点：在本实例中，为了使⽂字的上半部分显⽰为橙⾊，下半部分显⽰为绿⾊，需要在外层和内层标签中分别定义两组⽂字，将外层标签中的⽂字颜⾊设置为绿⾊，将内层标签中的⽂字颜⾊设置为橙⾊，并将两组⽂字进⾏叠加，实现叠加的效果需要将内层标签的position属性值定义为absolute。另外，将内层标签设置为指定⾼度，并隐藏超出指定⾼度部分的内容，实现隐藏的效果应⽤了CSS中的overflow属性。overflow属性⽤于定义溢出元素内容区的内容会如何处理。该属性的各属性值说明如下表所⽰：
值描述
visible默认值，表⽰内容不会被修剪，会呈现在元素框之外
hidden表⽰内容会被修剪，并且其余内容不可见
scroll表⽰内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容
auto表⽰如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容
inherit表⽰应该从⽗元素继承overflow属性的值
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以两种不同颜⾊显⽰⽂字</title>
<style>
p{
font-family:"微软雅⿊";/*设置字体*/
font-size: 80px;/*设置⽂字⼤⼩*/
color:green;/*设置⽂字颜⾊*/
text-align: center;/*设置⽂字居中*/
}
.half{
height:60px;/*设置元素⾼度*/
position:absolute;/*绝对定位*/
overflow:hidden;/*隐藏溢出部分内容*/
color:orange;/*设置⽂字颜⾊*/
}
</style>
</head>
<body>
<p class="all">
<span class="half">诗与远⽅</span>诗与远⽅
</p>
</body>
</html>
六、制作镂空⽂字
实例描述：在浏览页⾯时，经常会看到⼀些⽂字以空⼼的效果进⾏显⽰。本实例将通过CSS3来实现这⼀效果。该实例运⾏结果如下图所⽰：
技术要点：在本实例中，实现⽂字的镂空效果主要应⽤了CSS3中的text-stroke属性，通过该属性可以设置⽂字的描边效果。语法格式如下：
text-stroke:[text-stroke-width] || [text-stroke-color]
/*参数说明：
text-stroke-width：设置⽂字的描边厚度。
text-stroke-color：设置⽂字的描边颜⾊。*/
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作镂空⽂字</title>
<style type="text/css">
body{
/*background:#FFCCFF; /*设置页⾯背景颜⾊*/
text-align:center;/*设置⽂字居中*/
}
div{
font-family:"华⽂彩云";/*设置字体*/
font-size:64px;/*设置字体⼤⼩*/
font-weight:bolder;/*设置字体粗细*/
-webkit-text-stroke:1px #0000FF;/*⽂字描边*/
-webkit-text-fill-color:transparent;/*设置⽂字的填充颜⾊*/
}
</style>
</head>
<body>
<div>⽣活充满了阳光</div>
</body>
</html>
七、实现⽂字的图案填充效果
实例描述：所谓⽂字的图案填充效果是指⽤指定的图案填充⽂字，在页⾯中采⽤这种效果，可以实现美化页⾯的⽬的。结果如下图所⽰：
技术要点：在本实例中，⾸先需要实现⽂字的镂空效果，然后通过设置元素的背景图像实现⽂字的图案填充效果。设置元素背景图像的属性是 background-image，该属性可以设置的可能值有三个，说明如下：url(‘URL’)：⽤来设置图像的URL路径。none：默认值，不显⽰背景图像。inherit：规定应该从⽗元素继承background-image属性的设置。
代码实现：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。