开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详情
前言：
最近一直在学高数应付考试，是真的难，但是也一直没有忘记温习js，最近想了想想起了@蜡笔小新_这个大佬的css还是很好玩的，所以我也来试试css3。哪里不好望大家批评指正,最后源码附上。
完事开始与html结构
<body>
<div>
<div class="container">
<h1>我是菜小白,期待您的关注</h1>
</div>
</div>
</body>
css代码如下：
先给body与html的width，height，这些没有什么讲的
html,
body {
height: 100%;
width: 100%;
background-color: black;
}
再一个就是给咱们的父级盒子设置显示隐藏，大小，定位，颜色等属性，这些也没有什么讲的.
.container {
width: 100%;
height: 100%;
position: relative;
padding: 4em;
filter: contrast(20);
background-color: black;
overflow: hidden;
}
最后就是我们的h1标签
animation循环播放infinite，alternate 动画轮流反向播放，ease-in-out相对于匀速
还有就是规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放
在此的color属性可以是融合的时候的颜色，这里我设置的是青蓝色，比较稍微科幻点，
transform: translate3d(-50%, -50%, 0)括号设置的分别是x ，y，z轴的大小，其他的标签就不必说了
h1 {
height: 100%;
font-family: Righteous;
color: #18a0dc;
font-size: 4rem;
text-transform: uppercase;
line-height: 1;
animation: caixiaobai 3s infinite alternate ease-in-out;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
letter-spacing: -2.2rem;
}
接下来是动画@keyframes
在此给说一下属性letter-spacing属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
filter 属性定义元素（通常是）的视觉效果（如模糊和饱和度）。
思想：
在0%时我们让字间距与模糊度达到最小
50%使清晰度加大
100%字间距与清晰度最大最后这个color属性是设置字体开始缩小时的颜色
@keyframes caixiaobai {
0% {
letter-spacing: -2.4rem;
filter: blur(.3rem);
}
50% {
filter: blur(.5rem);
}
100% {
letter-spacing:.5rem;
filter: blur(0rem);
color: #fff;
}
}
