记录-css实现交融文字效果
Posted 林恒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录-css实现交融文字效果相关的知识，希望对你有一定的参考价值。
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
CSS是有魔法的，我们今天来实现一个CSS的动画效果，只需要几行代码就可以搞定。
第一步、我们要将一行文字从中间展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
background: #000;
.container
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30);
.text
font-size: 100px;
color: #fff;
/* 第一步、如何从中间展开 */
letter-spacing: 0px;
</style>
</head>
<body>
<div class="container">
<span class="text">hello world</span>
</div>
</body>
</html>
以上是基础代码结构，通过调整letter-spacing的值，我们可以控制他的展开与收起。值越小为负数时文字就可以挤在一起，越大文字间距就越大。
默认值为0时正常显示的效果
小于正常值的效果
我们可以为节点加上keyframes动画，此时letter-spacing属性转由keyframes控制可以达到自动展开文字的效果
.text
font-size: 100px;
color: #fff;
animation: showup 3s forwards;
@keyframes showup
from
letter-spacing: -50px;
to
letter-spacing: 10px;
第二步、我们需要设置文字融合在一起的效果
先给文本节点设置filter blur文字变得模糊
学过ps的就会知道，当给图片加上较高的对比度的时候，就会导致黑的部分越黑，白的部分越白。我们给父节点加上filter，设置contrast(30)，可以获得如下效果
这样就有了一些圆润的边缘，最后我们将对应的css属性交给keyframes控制，就可以达到最终的效果
@keyframes showup
from
letter-spacing: -50px;
/* 新增 */
filter: blur(10px);
to
letter-spacing: 10px;
/* 新增 */
filter: blur(2px);
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
background: #000;
.container
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30);
.text
font-size: 100px;
color: #fff;
/* 第一步、如何从中间展开 */
/* letter-spacing: 0px; */
animation: showup 3s forwards;
@keyframes showup
from
letter-spacing: -50px;
filter: blur(10px);
to
letter-spacing: 10px;
filter: blur(2px);
</style>
</head>
<body>
<div class="container">
<span class="text">hello world</span>
</div>
</body>
</html>
本文转载于:
https://juejin.cn/post/7220696133730828344
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
肝了一宿才收集的48个超炫酷的 CSS 文字特效，绝对值得收藏！！！
文章目录
- 一、实现线性渐变的文字
- 二、制作文字阴影效果
- 三、制作文字模糊发散效果
- 四、制作3D立体文字
- 五、以两种不同颜色显示文字
- 六、制作镂空文字
- 七、实现文字的图案填充效果
- 八、模拟古诗垂直显示文本
- 九、实现文字的倾斜效果
- 十、实现文字的荧光闪烁效果
- 十一、实现文字的舞台灯光效果
- 十二、制作发光文字
- 十三、实现立体旋转的文字
- 十四、文字翻转动画效果
- 十五、实现火焰文字
- 十六、实现文字的闪烁效果
- 十七、上下摇摆的文字动画效果
- 十八、制作跳跃的文字动画
- 十九、实现文字水纹效果
- 二十、实现文字水平往复循环滚动
- 二十一、使用SVG创建空心虚线线条文字
- 二十二、使用SVG错落显示文本中的每个文字
- 二十三、使用SVG实现字间距不等的文本
- 二十四、使用SVG将文本中的某部分突出显示
- 二十五、使用SVG实现线性渐变空心文字效果
- 二十六、使用SVG实现放射性渐变的文字效果
- 二十七、使用SVG实现文字的瘦身和增肥效果
- 二十八、使用SVG实现文字的压扁效果
- 二十九、使用SVG实现逐个文字旋转效果
- 三十、使用SVG实现文字旋转的动画效果
- 三十一、使用SVG实现文字的模糊效果
- 三十二、使用SVG实现文字的圆弧显示效果
- 三十三、使用SVG实现文字沿曲线显示效果
- 三十四、简单文字变色
- 三十五、变换的文字
- 三十六、霓虹灯文字
- 三十七、追逐点亮的文字
- 三十八、动荡的文字
- 三十九、文字虚幻抖动
- 四十、右上角文字
- 四十一、文字自动滚屏
- 四十二、文字抖动
- 四十三、指向文字时飞出星形标记
- 四十四、下雪
- 四十五、下雨
- 四十六、星空极速飞入效果
- 四十七、闪烁的星星特效
- 四十八、背景固定居中
一、实现线性渐变的文字
实例描述：在网页制作时，可以通过对文字颜色的设置来实现网页的特殊效果。本实例将使用 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属性的设置。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字的图案填充效果</title>
<style type="text/css">
body{
text-align:center;
}
div{
margin:20px;
font-size:64px;
font-weight:bolder;
background-image:url("./bg/bg.gif"); /*设置背景图像*/
-webkit-background-clip:text; /*背景被裁剪到文字*/
-webkit-text-stroke:1px #0000FF; /*文字描边*/
-webkit-text-fill-color:transparent; /*设置文字的填充颜色*/
}
</style>
</head>
<body>
<div>读书使人心明眼亮</div>
</body>
</html>
八、模拟古诗垂直显示文本
实例描述：本实例将模拟古诗的风格以垂直方式从右向左显示文本。运行实例，在页面中输出古诗《山行》，诗句以垂直方式进行展示，阅读的顺序为从右向左，结果如下图所示：
技术要点：在本实例中，实现以垂直方式从右向左显示文本主要应用了CSS中的writing-mode属性。该属性定义了文本在水平或垂直方向上如何排布。该属性主要有3个属性值，各个属性值的说明如下所示。horizontal-tb：默认值，表示水平方向从上到下的书写方式。vertical-rl：表示垂直方向从右向左的书写方式。vertical-lr：表示垂直方向从左向右的书写方式。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟古诗垂直显示文本</title>
<style type="text/css">
div{
font-family:"华文楷体"; /*设置字体*/
width:400px; /*设置元素宽度*/
margin:10px auto; /*设置外边距*/
padding:30px; /*设置内边距*/
background:lightblue; /*设置背景颜色*/
font-size: 36px; /*设置文字大小*/
color:green; /*设置文字颜色*/
text-align: center; /*设置文字居中*/
border:1px solid #CCCCCC; /*设置元素边框*/
box-shadow:3px 3px 6px #999999; /*设置边框阴影*/
writing-mode:vertical-rl; /*设置以垂直方式从右向左显示*/
}
</style>
</head>
<body>
<div>
<h4>唐杜牧《山行》</h4>
<p>
远上寒山石径斜，<br>白云生处有人家。<br>停车坐爱枫林晚，<br>霜叶红于二月花。
</p>
</div>
</body>
</html>
九、实现文字的倾斜效果
实例描述：在制作网页时，为了使网页更具有个性化的视觉效果，可以在页面中设置倾斜的文字。本实例将通过CSS3来实现文字倾斜的效果。运行结果如下图所示：
技术要点：在本实例中，实现文字倾斜的效果应用了CSS3中的transform 属性，设置元素倾斜角度的格式为：
transform:skew(x-angle,y-angle)
/*当设置一个参数时，表示垂直方向的倾斜角度；当设置两个参数时，第一个参数表示垂直方向的倾斜角度，
第二个参数表示水平方向的倾斜角度。*/
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字的倾斜效果</title>
<style>
div{
width:420px; /*设置元素宽度*/
margin:50px auto; /*设置元素外边距*/
font-size:36px; /*设置字体大小*/
font-weight:bolder; /*设置字体粗细*/
color:#9966FF; /*设置文字颜色*/
-webkit-transform:skew(30deg);/*设置倾斜角度*/
}
</style>
</head>
<body>
<div>让优秀成为一种习惯</div>
</body>
</html>
十、实现文字的荧光闪烁效果
实例描述：本实例将使用CSS3实现文字的荧光闪烁效果。结果如下图所示：
技术要点：在本实例中，实现文字的荧光闪烁效果使用了CSS3中的animation属性，通过该属性可以为指定元素设置动画。animation属性的语法如下：
animation: name duration timing-function delay iteration-count direction;
参数说明如下表所示：
| 参数 | 描述 |
|---|---|
| name | 规定需要绑定到选择器的keyframe名称 |
| duration | 规定完成动画需要的时间，单位为秒 |
| timing-function | 规定动画的速度曲线 |
| delay | 规定在动画开始之前的延迟 |
| iteration-count | 规定动画应该播放的次数 |
| direction | 规定是否应该轮流反向播放动画 |
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字的荧光闪烁效果</title>
<style type="text/css">
div {
text-align: center;
}
.a{
color:#0000FF; /*设置文字颜色*/
text-decoration: none;
font-size:5em; /*设置字体大小*/
font-family:"微软雅黑";/*设置字体*/
-webkit-animation: shine 2.4s infinite;/*设置动画*/
}
@-webkit-keyframes shine{/*创建动画*/
0%,100%{ color:#fff;text-shadow:0 0 10px #0000FF,0 0 10px #0000FF; }
50%{ text-shadow:0 0 10px #0000FF,0 0 40px #0000FF; }
}
</style>
</head>
<body>
<div class="d">
<a href="javascript:void(0);" class="a">陪你看日出</a>
</div>
</body>
</html>
十一、实现文字的舞台灯光效果
实例描述：在网页特效中，在文字上面可以用灯光使文字具有动态照明的效果。运行结果如下图所示：
技术要点：本实例主要使用了CSS3中的linear-gradient()函数实现文字颜色的线性渐变，并使用animation属性实现灯光照射的动态效果。
代码实现：以上是关于记录-css实现交融文字效果的主要内容，如果未能解决你的问题，请参考以下文章