肝了⼀宿才收集的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:可选参数,⽤于设置模糊的距离。
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属性的设置。
代码实现: